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

Posted 2023-03-05

【中文标题】如何在 div 中重复背景图像比页面长度更长？

【英文标题】：How repeat background image in div longer then page length?

【发布时间】：2012-06-07 14:44:23

【问题描述】：

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;

感谢您的帮助:)

【参考方案1】：

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

更多详情请见here。

编辑

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

【讨论】：

我现在刚刚尝试过，但没有任何区别......（默认情况下不打开背景重复？）它会重复直到你向下滚动。还有其他建议吗？

啊……这是链接：link

该死，这也不起作用...更新了网站上的 CSS，没有任何变化！

同时删除height: 100%。

等一下，其他页面现在变了吗？