如何在 div 中重复背景图像比页面长度更长？

Question

DIV（长于页面长度）背景停止重复

我有一个带有背景图像的 HTML 网页（在一个 div 中），一个从页面顶部延伸到底部的 div 以及一个用于内容的 div...但是 DIV 的（从上到下延伸）背景停止在页面下方重复！ （当你向下滚动时，没有更多的背景图片）请帮忙！

这是 CSS：

html { 高度：100%； } 身体 { 背景颜色：#7E6F7F; 高度：100%； } #bg { /*这是整个页面的背景图片*/ 位置：固定； 顶部：0； 左：0； 宽度：100%； 高度：100%； } #main { /*这是div的问题！！！*/ 填充：0px； 宽度：85%； 高度：100%； 背景颜色：#D2B9D3; 背景：网址（图片/Background_Content.jpg）； 背景附件：固定； 背景位置：0% 0%； 位置：相对； 顶部：0； 左：0； z-索引：1； 边距：自动； } #content { /*这是内容的div*/ 显示：块； 宽度：85%； 背景颜色：#E9CFEC； 填充：0.9375em； /*0.9375em=15px*/ 边框：0.125em 实心#867687； /*0.125em=2px*/ 文本对齐：对齐； -webkit-border-radius:15px; -moz-边界半径：15px； 边框半径：15px； -moz-box-shadow: 插图 0 0 5px 5px #BAA6BD; -webkit-box-shadow: 插图 0 0 5px 5px #BAA6BD; 盒子阴影：插图 0 0 5px 5px #BAA6BD; }

感谢您的帮助:)

Answer 1

您需要使用background-repeat 并将其设置为repeat-x、repeat-y 或repeat-both。

更多详情请见here。

编辑

啊，我明白了。 #main 是浏览器加载时的 100%。您会注意到，一旦滚动，重复就会停止。一个简单的解决方案是将bottom:0 添加到#main 样式。这将使它延伸到最底部。另外，删除height: 100%。