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;}