Grow your CSS skills. Land your dream job.

Multiple Backgrouns: Top and Bottom

  • # June 1, 2008 at 1:06 am

    First off, this is a great site! It’s late here so please excuse my spelling. I’m racking my brain trying to figure out how to use 2 different background images (top and bottom) for my pages. They are both gradient images 1px by 450px and I can have it repeat like I want it to using REPEAT-X but how do I get both images to show up: Here is the code I am using:

    Code:
    body {background-image: url(‘/images/Stage_BG_top.png’); BACKGROUND-REPEAT: repeat-x; HEIGHT: auto; WIDTH: auto; POSITION: absolute; TOP: 0px; LEFT: 0px; TEXT-ALIGN: center}
    body {background-image: url(‘/images/Stage_BG_btm.png’); BACKGROUND-REPEAT: repeat-x; HEIGHT: 50%; WIDTH: auto; POSITION: absolute; BOTTOM: 0px; LEFT: 0px; TEXT-ALIGN: center}
    body {background-color: #c8e3f1}

    On the page using IE6, only the bottom image shows up. I want the whole page from top to bottom to fill with the image, and am trying not to use DIV.

    Any hekp is greatly appreciated. Thank you.

    Shawn

    box
    # June 1, 2008 at 5:59 am

    You can only apply one background image per element (CSS3.0 will change that), and only the bottom image shows in your browser because it is read after the top one by the browser – this is where the cascade term comes from in cascading style sheets – each subsequent entry for an element overwrites the previous one.
    You could try changing the top ‘body’ element to ‘html’.

    # June 1, 2008 at 3:41 pm

    Yep, box described it correctly, you can’t apply multiple backgrounds to a single element. CSS3 will support it, but only Safari is honoring that the moment, and even then it’s a bit of a different syntax than you are using.

    There are other ways to accomplish what you are trying to do though, but they will likely all use a DIV of some kind, which you mentioned you didn’t want to do. And reason for that?

    # June 1, 2008 at 10:07 pm

    Thank you for the replies. The reason for not wanting to do the DIV elements,.. I like simplicity. I also fear that too many DIV elements will make the whole document complicated.

    The other thing I was looking at while reading the replies, is using multiple CSS in a document. Have one CSS for the top image and one CSS for the bottom. That should work shouldn’t it?

    box
    # June 2, 2008 at 5:19 am

    No, each declaration will overwrite the previous one, whether its within the same stylesheet, in a subsequent stylesheet, in your page head, or in-line – the last instruction that the browser reads will be the one it uses.
    Have you not tried the suggestion I offered in my first reply? Utilise your HTML element.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".