页面链接：http : //www.northtreestudios.com/sandbox/
想知道如何让我的网站的背景图像不会由于它们的宽度/位置而触发滚动条。我使用的是 16 列的 960 网格，但背景在任意位置有多个图像以创建一些细节效果。这些不符合网格；它们位于容器的左侧和右侧。
如果您查看链接，您会看到顶部的黄色条纹不会触发滚动，但底部的白色条纹会触发滚动，如果窗口的大小重新调整为小于其宽度。
我基本上希望只有当窗口的宽度小于 960 网格时才会出现水平滚动条。左侧或右侧的所有其他图形附加功能不应触发滚动。有什么方法可以完成这个巨大的、低效的背景图像？
您需要做的是使背景图像实际上是背景图像，然后它就会起作用。
所以，首先你需要添加一些元素来拥有背景图像，像这样：
<body>
<div class="wrapper background-foo">
<!-- your content div -->
</div>
</body>
每张图片需要一个背景 div，并且 div 需要是全宽的，以便您的背景图片可以在任何地方。使用background-position给你安排的背景。
一个可能有用的技巧，如果您想将图像放在居中右侧并突出到侧面，您可以像这样伪造它：
.background-ffo { background: url(...) no-repeat 400px center; }
然后让背景图像看起来像这样：
+-----------------------------------------+
| .background-foo |
| |
| |
| |
| |
| |
| |
+------------------------------------------------------------+
| | ################### |
| | background image ################### |
| | ################### |
| | ################### |
| | ################### |
+------------------------------------------------------------+
| | ^^ the bit of background
| | you care about
| |
+-----------------------------------------+
由于它是背景，并且您的 background-foo div 仍然像您的内容一样适合页面，因此不会有水平滚动条。