Html 如何使背景图像比网站的内容区域宽（没有滚动条）

我已经得到了一个网站的设计，并试图实现它

我遇到的一个问题是，设计中的一些背景图像（一个用于页眉，一个用于正文，一个用于页脚）比网站的主要内容区域宽

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

---

这是不可取的，因为背景对于查看网站来说并不重要，我不希望滚动条出现（滚动条只应在浏览器太小而无法完全显示网站内容时出现）

第二种技术是使用一个单独的、绝对定位的div来显示标题背景图像（并将其放在具有浏览器窗口大小的元素下），并将其宽度设置为100%，以使其永远不会超过浏览器窗口的大小（从而创建滚动条）

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

我发现的一个很好的例子就是Quicken网站：。大尺寸时，它的云背景看起来不错，但是如果你将窗口的宽度设置得足够小，云就会相对于内容开始移动（糟糕！）

有没有办法解决这个问题，让背景图像

不要创建滚动条，因为它们不是网站内容的一部分

相对于站点内容是固定的（并且在浏览器窗口较小时不移动）

?

理想的解决方案是将溢出转换为隐藏在主体上，但仅适用于指定的div。不幸的是，我认为这是不可能的

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

谢谢！（这是一个复杂的问题，因此如果需要任何澄清，请告诉我）

---

更新：通过将背景div上的最小宽度设置为内容的宽度，修复了此问题。

我是否遗漏了什么，或者您是否应该使用该属性

我看了一下Quicken网站，说实话，当浏览器调整大小时，云背景图像的移动不应该担心，除非你的背景图像比一堆云更独特

---

明白我的意思了吗？

是我遗漏了什么，还是你应该使用这个属性

我看了一下Quicken网站，说实话，当浏览器调整大小时，云背景图像的移动不应该担心，除非你的背景图像比一堆云更独特

---

明白我的意思了吗？

您可以使用溢出属性并将其设置为隐藏在导致滚动条出现的div上。

您可以使用溢出属性并将其设置为隐藏在导致滚动条出现的div上。

您需要使页眉、内容和页脚的宽度为100%。并将图像作为背景图像放在这些分区中。。。水平居中

在特定的div中有一个居中的包装器。是这些div的内容的宽度

像这样

HTML

---

希望这有帮助。

您需要将页眉、内容和页脚的宽度设置为100%。并将图像作为背景图像放在这些分区中。。。水平居中

在特定的div中有一个居中的包装器。是这些div的内容的宽度

像这样

HTML

---

希望这能有所帮助。

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

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

我在一个我工作过的站点上遇到了相同的问题，并提出了以下解决方案，如果所有背景图像的宽度都相同，则效果很好

/* 
A container div that is set to the 100% width, with the overflow set to hidden. 
This hides the overflowing images if the window sizes is too small 
*/

#bg_container {
    position:absolute;
    z-index:0;
    top:0px;
    width:100%;
    overflow:hidden;
}

/* 
A div that sets the size of the content and centers itself on the page. 
*/

.bg {
    margin:0 auto;
    width:1000px;  /* content size */
    overflow:visible;
}

/* 
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px. 
*/

.bg img {
    margin-left:-250px;
}

---

我在一个我工作过的网站上遇到了同样的问题，并提出了以下解决方案，如果你所有的背景图像都是相同的宽度，那么这个解决方案会很好地工作

/* 
A container div that is set to the 100% width, with the overflow set to hidden. 
This hides the overflowing images if the window sizes is too small 
*/

#bg_container {
    position:absolute;
    z-index:0;
    top:0px;
    width:100%;
    overflow:hidden;
}

/* 
A div that sets the size of the content and centers itself on the page. 
*/

.bg {
    margin:0 auto;
    width:1000px;  /* content size */
    overflow:visible;
}

/* 
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px. 
*/

.bg img {
    margin-left:-250px;
}

---

问题是滚动条出现的div是body，我确实希望滚动条有时出现在body上。问题是滚动条出现的div是body，我确实希望滚动条有时出现在body上。我使用的背景有点与众不同，它与前面的内容对齐很重要。（我正在使用背景图像属性，就像Quicken网站正在使用的一样）。好吧，这在你的帖子中并不明显：-）“这是不可取的，因为背景对于浏览网站来说并不重要”或者“而且它与前面的内容对齐很重要”-这是什么？澄清一下，背景的中心很重要，但内容之外的左边缘和右边缘却不重要，当然也不重要到需要滚动到的程度。我使用的背景比较独特，重要的是它与前面的内容对齐。（我使用的是背景图像属性，就像Quicken网站正在使用的一样）。好吧，从您的帖子中看不到：-）“这是不可取的，因为背景对查看网站并不重要”，或者“重要的是它与前面的内容对齐”——是什么？要澄清，背景的中心很重要，但内容之外的左边缘和右边缘很重要

/* 
A container div that is set to the 100% width, with the overflow set to hidden. 
This hides the overflowing images if the window sizes is too small 
*/

#bg_container {
    position:absolute;
    z-index:0;
    top:0px;
    width:100%;
    overflow:hidden;
}

/* 
A div that sets the size of the content and centers itself on the page. 
*/

.bg {
    margin:0 auto;
    width:1000px;  /* content size */
    overflow:visible;
}

/* 
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px. 
*/

.bg img {
    margin-left:-250px;
}