Double Backgrounds?

[Mourning Dove]

Here's a rough aproximation of what I want:

http://img.villagephotos.com/p/2003-...219/divex1.jpg
http://img.villagephotos.com/p/2003-...219/divex2.jpg

Notice that when the screen is resized, the white space in the middle grows smaller. One image is aligned to the top, and the other is aligned to the bottom.

I want to get this effect through a CSS background. Here, I'll just say what I mean in this way: below is what one might imagine the code to look like (if this code actually worked).

Code: Select all

body
 {
 background-image:url(backgroundtop.jpg);
 background-repeat:repeat-x;
 background-position:top;
 background-attachment:fixed;
 }
body
 {
 background-image:url(backgroundbottom.jpg);
 background-repeat:repeat-x;
 background-position:bottom;
 background-attachment:fixed;
 }

But as I've said, that doesn't work. What would? I need the images to be in the background because there will be tables on top, tables that will cause the page to scroll. I want those images to remained fixed in their position. I don't want to just include the white space in the background image, though, because then the site would only look good in one resolution. Anyone have any ideas?

[craig]

cant have 2 defined backgrounds in CSS,
you can only use a color and a background.

Unless you use overlappding divs but that would prob require png's which would screw up in IE

[iZone]

use a div with a background for the top and place the bottom bg on the body tag.

[ukgeoff]

I think the most flexible solution is to have three divs, one each for the top and bottom with their height fixed and their image as a background. Have your third div as the middle section which takes up whatever space is available.

Set the z-index for these three divs to 0 (zero); Make sure any other layout divs have a z-index greater than this so that they always site on top.

[masonbarge]

Am I missing something? Why don't you just do 3 div's with different backgrounds? You really shouldn't need a "clear" command although you might have to enforce the width with a hack (like a .gif 1px high across a div) in one or more browsers. You shouldn't even need a wrap division for this.

Code: Select all

 #divTop     {width: 1000px; height: 300px; background: url();}
#divMiddle  {width: 1000px; height: auto; background: #fff; clear: both;}
#divBottom {width: 1000px; height: 300px; background: url();clear: both;}

If you want it liquid you can do it without much trouble; you'll just have to make sure all browsers follow the "width: 100%;" style, and if not, use something to keep the div's at full width.

[masonbarge]

I'm thinking it will be width problem if anything. I assume he has a 1px wide repeating background, that will hold the box up but won't help expand it.