html - 如何使背景图像比网站的内容区域更宽(无滚动条)

Question

我得到了一个网站设计，我正在尝试实现它。

我遇到的一个问题是设计中有一些背景图片(一张用于页眉，一张用于网站正文，一张用于网站页脚)比网站的主要内容区域更宽。

简单地将它们作为背景图片放入是行不通的，因为如果浏览器窗口不够大无法完全显示背景，那么将页眉、正文和页脚 div 扩展到足以容纳背景会导致水平滚动条出现。

这是不可取的，因为背景对于浏览网站来说并不是很重要，而且我不希望为它们出现滚动条(滚动条应该只在浏览器太小而无法完全显示网站内容时出现)。

第二种技术是有一个单独的、绝对定位的 div 来显示标题背景图像(并将其放在具有浏览器窗口大小的元素下)，并将其宽度设置为 100%，这样它就不会超过浏览器窗口(并因此创建滚动条)。

这在一定程度上起作用 - 但是，当窗口太小时，背景开始相对于内容移动，因为背景的“顶部中心”位置是相对于浏览器窗口，而不是内容区域。在大尺寸下，这些实际上是相同的，因为内容区域居中，但在小尺寸下，仅显示部分内容，因此内容的中心和浏览器窗口的中心不同。

我发现这个问题的一个很好的例子是 Quicken 网站:http://quicken.intuit.com/ .在大尺寸下，它的云背景看起来不错，但如果您将窗口的宽度设置得足够小，云就会开始相对于内容移动(糟糕!)。

关于如何解决这个问题以便背景图片的任何想法

1. 不要创建滚动条，因为它们不是网站内容的一部分
2. 相对于网站内容是固定的(并且不会在浏览器窗口较小时四处移动)

?

理想的解决方案是将 overflow 设置为 hidden on body，但仅限于指定的 div。不幸的是，我认为这是不可能的。

我更喜欢纯 html/css 解决方案，但我承认我可能需要 js 来获得我想要的效果。

谢谢! (这是一个复杂的问题，所以如果需要任何说明，请告诉我)

更新:通过将背景 div 上的最小宽度设置为内容的宽度来解决此问题。

Answer 1

将包含背景图片的 div 的最小宽度设置为内容的宽度。