在整个页面上扩展背景图像...无需滚动导致其中断

Question

我对Web开发很新，但我在设计一些新的页眉/页脚时意识到了一些事情。当您将它们包装在一个背景图像/颜色延伸到整个页面的容器中时，然后将网页窗口缩小到小于预期宽度，然后滚动查看您在内容中看不到的内容较小的窗口，背景图像容器不再足够大（因为它会自动调整到窗口的宽度，即使其中的内容溢出），并且您看到的是空白而不是背景图像。

以http://www.stumbleupon.com的主页为例。缩小窗口，然后向右滚动。突然间，他们所有的背景图像都消失了。标题，身体，一切。只是满足于平面，默认颜色。

有解决方案吗？这在网页设计中是否被忽略为一个无关紧要的问题？这对我来说似乎非常重要，特别是在做一次查看多个标签/窗口的事情，或者如果有人（上帝禁止）使用分辨率宽度小于1024的显示器时。

Answer 1

StumbleUpon刚刚对容器div粗心大意。他们设置了一个宽度为100％的容器div，然后将其中的标题div设置为100％。

<div id="container" style="width:100%">
    <div id="header" style="width:100%">
        Header Content
    </div>
</div>

容器div延伸到可见窗口宽度。子div然后只延伸到div的宽度。如果您将标题放在容器div之外，它将延伸到页面的整个宽度。

<div id="header" style="width:100%">
        Header Content
</div>
<div id="container" style="width:100%">

</div>

有关全宽标题的示例，请参阅我的主页：http://smallhadroncollider.com。