Shrinking Background

This is my first post here, and my first time seeking help on a forum with a website, so please go easy on me.

Here's my problem: Whenever the width of the page shrinks below 100%, and you scroll to the right, the background doesn't follow. I designed the background images to stretch with the page, but this is a nasty side effect. I suspect that the divs containing the background image shrink when you shrink the page, but I can't figure out a solution that doesn't destroy the rest of my page. Also, I have nested divs in the main content of the page, set up that way to achieve the drop shadow effect seen just below the navigation bar. I suspect this may have something to do with it as well.


Here is the code controlling the background images.

#shadow{
background-image:url("images/bodyBGTop.gif");
background-repeat:repeat-x;
margin:0 auto;
padding-top:150px;
}

#body{
background-image:url("images/bodyBG.gif");
padding-bottom:48px;

}

#bodyInner{
width:1020px;
margin:0 auto;
}

#bodyInner:after {
clear:both;
content:"";
display:block;
height:0;
font-size:0;
}


Attached are the html and css files, as well as a picture of the problem. Here's the test link to my site: http://crazyoldmanthink.com/testsites/silvertutoring/

Any help is much appreciated.

Sorry, i dint get u. can u explain , actually wht u want??? can u share 2 screenshots 1st how it should look like and 2nd, how it is looking now...

I added an image (the wide one) of the navigation bar and the center background spanning the page. The backgrounds span the page when it's stretched. But if you look at the other image, when the width of the page shrinks and you scroll, the background doesn't fill the page. Try the link I provided. Reduce the width of the page and scroll, and you'll see that the background doesn't cover. I hope that explains it.

Just set the width of palceholder and need help, as they can fit into their parent element.

Setting a width for the placeholder might prevent the background from shrinking, but it creates a new problem. I want the backgrounds to span the page, but with a set width they become fixed, and won't expand with the page. I'm looking for a solution that satisfies both of those conditions.

Then do 1 thing..... set background with body... and content in different element with limited width according to its parent.

I did that, actually. Nested in my body divs is a content div with a set width. The divs with the background images have no set widths. Here's what it looks like:

HTML:


<!-- Drop Shadow Background-->
<div id="shadow">
<!-- Main Body Background-->
<div id="body">
<!--Content Container-->
<div id="bodyInner">

<!-- Content Starts Here-->
<div id="content">
<div id="mainContent">
<div id="needHelp">
<h2>Need Help?</h2>
<p>
text
</p>
</div>
<div id="splash">
</div>
</div>
<div id="homeWidgets">
</div>
</div>
</div>
</div>
</div>


And the CSS related to these divs:
#shadow{
background-image:url("images/bodyBGTop.gif");
background-repeat:repeat-x;
margin:0 auto;
padding-top:150px;
}

#body{
background-image:url("images/bodyBG.gif");
padding-bottom:48px;

}

#bodyInner{
width:1020px;
margin:0 auto;
}

#bodyInner:after {
clear:both;
content:"";
display:block;
height:0;
font-size:0;
}

#content{
margin-top:-150px;
position:relative;
float:left;
width:1020px;
}

which background and where u want??

Well thanks for the attempt to help me solve my problem. I've looked further into this issue, but it appears to be a limitation of the code. I don't think it's possible to have the spanning background elements without the shrinking when less than 100% width. I saw some websites by professional web designers who have the same problem, but skirt it by disabling horizontal scrolling. So I think that's what I'll do.