WordPress.org

Ready to get started?Download WordPress

Forums

CSS: Multiple Background Images? (9 posts)

  1. pvicnan
    Member
    Posted 10 years ago #

    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! ^.^

  2. Anonymous
    Unregistered
    Posted 10 years ago #

    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)
    ;-)

  3. ihad
    Member
    Posted 10 years ago #

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

  4. pvicnan
    Member
    Posted 10 years ago #

    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!

  5. lane
    Member
    Posted 10 years ago #

    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 1600x50) and place the pattern/image that you want to repeat where you want it to appear.

  6. Peoii
    Member
    Posted 10 years ago #

    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.

  7. pvicnan
    Member
    Posted 10 years ago #

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

  8. pvicnan
    Member
    Posted 10 years ago #

    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

  9. Tek
    Member
    Posted 10 years ago #

    That looks VERY classy.
    Me likes! =)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.