如何在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-both 。

更多細節可以在這里找到。

編輯

啊，我現在看到了。 加載時瀏覽器的#main為100％。 您會注意到重復會停止滾動。 一個簡單的解決方案是在#main樣式中添加一個bottom:0 。 這將使它延伸到最底層。 另外，刪除height: 100% 。