CSS：水平滚动时背景不存在

Question

好的，我的背景设置如下：

HTML

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

CSS

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

所以想法是内容在800px的盒子里，而内容的背景跨越100％，我对页面的页眉，页脚和主要部分的不同区域有相同的设置。所以他们都有不同的背景，跨越100％，而内容都在800px的盒子里。

所有这一切都很好，直到你使窗口足够小以显示水平滚动条，然后当你水平滚动时，显示的部分不再有背景，但如果你使页面更宽，那么背景就在那里。

您可以在此处查看：Clicky

有没有办法解决这个问题？

谢谢！

Answer 1

由于您使用的是固定宽度的内容区域，为什么不给您的#container（实际上#inner_content_container在您的网站上）一个固定的宽度呢？由于您的图像宽度为824像素，我只使用FireBug使您的容器宽度增加，问题就会消失。

注意：执行此操作时，您还需要为容器指定一个自动边距，如果您不想要滚动条，则将溢出设置为隐藏..

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

Answer 2

我想出（或似乎）当你滚动时，只有#content的背景是“透露”而不是#container的背景。所以我所做的是将#content设置为与#container具有相同的背景这样就解决了问题，而不必为非内容显示滚动条。