【发布时间】：2011-12-08 22:33:56
【问题描述】：
看看这个picture 看看我想要完成什么。基本上我想使用全屏背景图像，然后在左侧的徽标和导航之后覆盖一个 div（在链接的图片中，这是中间的灰色区域，周围有红线）总是有 100 % 高度与滚动无关。
我认为我能做到这一点的唯一方法是为垂直重复的灰色区域使用背景图像，然后为全屏背景图像创建一个 div 并更改 z-indexes 以获得所需的分层。
我用于覆盖 div 的 css 是：
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
但是当您必须滚动查看更大的内容时，div 总是在“折叠”处结束，然后背景图像会接管其余的内容。
在纯 CSS 中我可以利用什么技巧来做到这一点？另外，出于跨浏览器的考虑，我不想使用 CSS3 多背景。
【问题讨论】：
-
看起来该图片在 DropBox 上不公开。我收到了 403
-
已修复。现在应该可以工作了。
-
你试过把高度改成最小高度吗？
-
我最终将其作为答案 - 但答案已被接受。无论如何，我会把它留在这里作为另一种方式，因为它可以帮助任何人：jsfiddle.net/6DHKK
标签： css background-image