2 background images w/ CSS

Discussion in 'CSS' started by nave3d, Sep 24, 2009.

0
  1. #1
    I got a website and im trying to get 2 images in the background. The code im currently using is this:

    body {
    background-image:url('BGLEFT.jpg');
    background-repeat:repeat-y;
    background-position:left;
    }

    Someone on another forum told me if I also added this code, it would add the the right border, but it did not work.

    html {
    background-image:url('BGRIGHT.jpg');
    background-repeat:repeat-y;
    background-position:right;
    }

    Is there any way that I can add a second BG image to the website?
     
    nave3d, Sep 24, 2009 IP
  2. addlinkurl

    addlinkurl Well-Known Member

    Messages:
    2,409
    Likes Received:
    129
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    1
    #2
    you can use a wide background(bgleft.jpg on left and bgright.jpg on right). or you have to use a new div in body.
     
    addlinkurl, Sep 25, 2009 IP
  3. nicolasthun

    nicolasthun Guest

    Messages:
    309
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    nicolasthun, Sep 25, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Interesting I was thinking about whether you could place a background image on the HTML element the other day, I guess it's not possible then or not supported for that matter...

    Ah well I just tested it, and it seems placing a background on the html, renders placing a background on the body element totally useless for some reason. Even if the html background is set to no-repeat and the body background is positioned somewhere else or has a background colour set to it, it cannot be seen ! For some reason adding a background to the html adds a mask over the body element completley with regards to backgrounds, so I guess it shouldn't be messed with unless someone knows otherwise.

    ..Oh but wait this article, from this year, and a usual reliant source, claims the opposite to what I said, and says it is possible? But I literally copied and pasted their example, and it doesn't work for me?

    No wait again....I had no content in my body, doh, my bad. It does seem at this current moment seem to work correctly in old/new browsers, and a possibly clever way to avoid one of those extra sandbagging div's we need for backgrounds. So ignore like the 2nd and 3rd paragraph of this post, but i'll leave them in there so you can all see my story for tonight :).
     
    Last edited: Sep 25, 2009
    wd_2k6, Sep 25, 2009 IP
  5. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #5
    You can you this for general background:
    body { <---- best for main background
    background-image:url('BGLEFT.jpg');
    background-repeat:repeat-y;
    background-position:left;
    }

    and then to have another background:<----- best for header part background. (my sample code: http://alfieindesigns.ucoz.com/fs/index.html)
    .header {
    background-image:url('bg2.jpg') top center no-repeat;
    position:relative;
    height:200px;
    }
     
    alfieindesigns, Sep 26, 2009 IP
  6. appleranger

    appleranger Peon

    Messages:
    339
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You should be able to add a second background, as long as you find the right coding and remember to ignore the div.
     
    appleranger, Sep 28, 2009 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Placing ANY formatting on HTML more than height:100%; for 100% min-height layouts is usually a plan for disaster given the completely inconsistent way the HTML 'element' is handled - do yourself a favor and just slap in an extra wrapping DIV.
     
    deathshadow, Sep 28, 2009 IP