The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multiple Backgrouns: Top and Bottom

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #22724

    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:

    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.



    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?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.