CSS: background absent when scrolling horizontally

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

Randy Simon · Accepted Answer · 2010-03-11T16:09:19.643

0

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

edited Mar 11 '10 at 16:09

answered Mar 11 '10 at 15:17

Randy Simon

3,324
21
19

That would make the viewport have to be 824 wide to not show scroll bars, I want people with 600x800 res not to still have horizontal scrollbars when maximized. But you did give me an idea that fixed it, for the header and footer, I set the content to have the same background as the container, and for the main section I just set it to have a white background. This fixed it :) – JD Isaacks Mar 11 '10 at 15:27
I think you could have also used overflow:hidden (I updated my answer). Either way, glad you got it working. – Randy Simon Mar 11 '10 at 16:08

score 0 · Answer 2 · answered Mar 11 '10 at 15:37

0

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.

answered Mar 11 '10 at 15:37

JD Isaacks

56,088
93
276
422

@easwee you cannot accept your own answer until it has been 2 days since you asked the question. I would also prefer to mark someone else's answer rather than my own. So I would like to give someone the opportunity to either give a better answer than mine or expand on my answer so I can mark them instead. :) – JD Isaacks Mar 11 '10 at 15:53

CSS: background absent when scrolling horizontally

HTML

CSS

2 Answers2

Linked