OK I have backgrounds set up like this:

HTML

<div id="container">
    <div id="content">
    CONTENT HERE
    </div>
</div>

CSS

#container
{
    background:url(image.gif);
}
#content
{
    width:800px;
    margin:auto;
}

So the idea is for the content to be within an 800px box, while the background for the content spans 100%, I have this same setup for different area like the header, footer, and main portions of the page. So they all haver different backgrounds spanning 100% while the content is all within an 80开发者_如何学编程0px box.

All this works fine, until you make the window small enough to show a horizontal scrollbar, then when you scroll horizontally, the revealed portion no longer has a background, yet if you make the page wider, then the background IS there.

You can see it here: Clicky

Is there a way to fix this?

Thanks!!

Since you are using a fixed width content area why not give your #container (actually #inner_content_container on your site) a fixed width also? Since your image is 824px wide I just used FireBug to make your container that width and your problem goes away.

NOTE: When you do this you will need to give the container an auto margin too and set overflow to hidden if you don't want scroll bars..

#container {
  margin:auto;
  overflow:hidden;
  width:824px;
}

I figured out (or it seems) that when you scroll, only #content's background is "revealing" not #container's background. So what I did was set #content to also have the same background as #container This fixes the problem without having to make the scroll bar appear for non-content.