CSS: Multiple Background Images?

  • A CSS question here; Is it possible to have multiple background images? If so, how? For example, 1 image diplayed at the top-right, another at the bottom-right, and the last repeated along the y-axis at the right.
    Thank you! ^.^

Viewing 8 replies - 1 through 8 (of 8 total)

  • i can think of how to do two. try declaring an id or class on the body tag
    ie <body id="..."> or <body class="...">
    and in your css:
    body.(name) pr body#(name) {
    background:url(...) no-repeat top right;
    }
    etc, in addition to your regular body { background… } – i havent tried this, so im not sure if it will work entirely. hope that helps. (be sure to check the documentary on those tags)
    ??

    are you looking for this maybe?
    https://www.alistapart.com/articles/onionskin/

    Thread Starter pvicnan

    (@pvicnan)

    Hmm.. so, if I were trying to implement this on the Post div, I should encapsulate THAT in another div? I’ll give it a spin!

    No, you can’t have multiple background images. Use the top-right image in the header, bottom-right in the footer, and the last repeating one in the background like:
    ‘background: url(yourImage.jpg) repeat-y;’
    Just make the background image wide (ie 1600×50) and place the pattern/image that you want to repeat where you want it to appear.

    I’d recommend simply using multiple div layers, so something like the following:

    body { background: url(images/top_left.png) top left no-repeat; }
    div.topbotright { background: url(images/botright.png) bottom right no-repeat; }
    div.repeater { background: url(images/repeater.png) repeat-y; }

    Then in your markup, simply add the div’s, in that order, wrapping all of your code (with of course, adding paddings and margins of 0 on all of that), and you should be ready to go.
    I wouldn’t try for anything where you could declare both all of them in the same tag, because that would surely lower your browser compatibility.

    Thread Starter pvicnan

    (@pvicnan)

    I got it! Thank you! I hadn’t realised that that onion-skinning technique could be applied! *’.’*

    Thread Starter pvicnan

    (@pvicnan)

    I hadn’t realised that the effect is screwed on the IE, and MSN Explorer; I’d leave it at that, but majority of my viewers use these browsers. Any way for a work-around? Thank you! The site

    That looks VERY classy.
    Me likes! =)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS: Multiple Background Images?’ is closed to new replies.