background-image not filling browser window

[ArthurH]

the <div> container is defined as "width:100%" but the background image does not file the browser window, only as far as text appears on the longest line.

.master #mainContent {
z-index:-1;
position:absolute;
top:109px;
left:160px;
height:100%;
width:100%-160px;
background-image:url(_Images/bg_Blue_Wave.jpg);
background-repeat:no-repeat;
padding:20px
}

Note: before you ask, the image is large enough.

Thanks for any help.

Arthur

[BIOSTALL]

Is 'width:100&#37;-160px;' even valid CSS? I've never seen this in my eight years of development :-P Could be where the issue lies

[ArthurH]

There is a sidebar 160px wide. a div with width:100% is then 160px wider than the browser window, requiring constant use of the horizontal scroll bar.

I tried a lot of things until the width:100%-160px which dreamweaver flags as unsupported but it works, check it out at www.AllThingsAquatic.com

You will see by looking around that all pages with enough text to wrap around display the background image correctly, but the others have it chopped somewhere around the middle of the page. They all use the ID=mainContent.

[ArthurH]

OK, I've come up with some kludge. It is not elegant but it kind of works. I created a div as the first element inside of the mainContent div. In there I put a few "The quick brown fox ... " with a color:white (that you cannot really see over the backgound). I used a top:0 attribute on this div. You can see the result at www.AllThingsAquatic.com sidebar menu "Products/Fountains" then click Outdoor on the to menubar.

There's got to be a better way to force the background image to fill up the browser window (viewport).

[Major Payne]

CSS2.1 doesn't allow background image resizing. CSS 3 does, but is not supported by all browsers yet. For 100&#37; background images, take a look at:

http://www.cssplay.co.uk/layouts/background.html

Used as a link.