css - HTML背景重叠正文背景

Question

我在 html 和 body 标签上有一个背景图片，因为我在 html 上有一个重复的背景，我想随着内容的高度增加。在此之上是主体背景图像 - 这是主要背景图像(似乎溶解到 html 图像中，但它只是与它重叠)。

除了当有人进行浏览器缩放时，这工作正常。奇怪的是，HTML 背景开始蔓延到右侧的正文背景上。

html {
margin: 0; padding: 0; border: 0;
background: #000000 url("menu/images/redline2.jpg") repeat-y center;
}

body {
margin: 0; padding: 0; border: 0;
background: url("menu/images/about_bg2.jpg") no-repeat center;
}

问题示例链接:http://www.bitchofrome.com/about/about3.html

Answer 1

这是一个常见问题，有一个简单的解决方案。当您有一个带有背景颜色或图像的 100% 宽度容器时，通常会发生这种情况。如果缩小浏览器窗口(或缩放)然后向右滚动，背景就会消失(因为它不会重绘)。解决方法是在外部容器上设置一个等于(或大于)内部元素宽度的最小宽度。

在这种情况下，需要的是:

html {min-width: 1100px;}