Question

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 800px 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!!

Answer 1

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;
}