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

Question

DIV(长于页面长度)背景停止重复

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

这是 CSS:

    html {     height:100%;    }    body {     background-color:#7E6F7F;     height:100%;    }    #bg { /*This is the background image for the whole page*/     position:fixed;      top:0;      left:0;      width:100%;      height:100%;    }    #main { /*This is the problem div!!!*/     padding:0px;     width:85%;     height:100%;     background-color:#D2B9D3;     background: url(Images/Background_Content.jpg);     background-attachment:fixed;     background-position:0% 0%;     position:relative;      top:0;     left:0;     z-index:1;     margin:auto;    }    #content { /*This is the the div for the content*/     display:block;     width:85%;     background-color:#E9CFEC;     padding:0.9375em; /*0.9375em=15px*/     border:0.125em solid #867687; /*0.125em=2px*/     text-align:justify;     -webkit-border-radius:15px;     -moz-border-radius:15px;     border-radius:15px;     -moz-box-shadow: inset 0 0 5px 5px #BAA6BD;     -webkit-box-shadow: inset 0 0 5px 5px #BAA6BD;     box-shadow: inset 0 0 5px 5px #BAA6BD;    }

感谢您的帮助:)

Answer 1

您需要使用 background-repeat 并将其设置为 repeat-x、repeat-y 或 repeat -两者都是。

可以找到更多详细信息here .

编辑

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