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;
}
谢谢你的帮助:)
1条答案
按热度按时间57hvy0tb1#
您需要使用
background-repeat
并将其设置为repeat-x
、repeat-y
或repeat-both
。更多详情请参见here。
啊,我现在明白了。#main是100%的浏览器,当它加载的时候。你会注意到重复停止你滚动。一个简单的解决方案是添加一个
bottom:0
到#main样式。这将使它伸展到最底部。另外,删除height: 100%
。