css 如何在div中重复背景图像超过页面长度?

chhkpiq4  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(133)

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;
}

谢谢你的帮助:)

57hvy0tb

57hvy0tb1#

您需要使用background-repeat并将其设置为repeat-xrepeat-yrepeat-both
更多详情请参见here

    • 编辑**

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

相关问题