CSS相對背景未在插入html代碼時擴展

Question

感謝您的幫助，您可以為我提供/將我指向寫信方向。

我不確定如何解釋發生了什么。

我當前有一個帶有圖像背景的頁面（圖像為4044,2160，因此它比您在單個屏幕上（通常）所看到的要大）。

當前，在頁面加載時，圖像居於頂部居中，不再重復，因此完全填充了背景。

但是，當通過javascript等插入html代碼（CRUD）時，結果頁面在y方向上變得大於原始頁面，背景會停止並且不會填充下面的空間。

http://postimg.org/image/jqzx0vuzr/

我不確定該怎么做才能修復它，並且很可能認為這是一個CSS問題。

下面是代碼：HTML

<section id="index" class="index clinic">
    <div id="x_container">
        Javascript insertion of code
    </div>
</section>

的CSS

.clinic{
    width:100%;
    position:relative;
    background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
    height: 100%;
    padding: 0;
}

#index.index {
    padding:15% 0 0 0;
}
#xcrud_container{
    width: 90%;
    margin: 0 auto;
}

看來javascript對插入的內容無關緊要（嘗試過lorem ipsum等），但是只是為了擴展所插入的內容，x_container的大小會根據狀態而變化，而javascript會對此進行更改。 （因此不會重新加載頁面，並且不會重新計算背景尺寸）

我目前已經嘗試過clearfix解決方案（但無濟於事），並且嘗試在背景圖片上重復-y。

最后，我嘗試通過直接將html代碼（即沒有插入任何內容，並且與頁面的html代碼分開）直接保存到頁面中，並嘗試查看背景是否擴展，來手動創建頁面。 它不是。 背景填充了初始視圖區域，但是，當您向下滾動頁面時，白色區域會再次出現。

只是要確保知道背景圖像大於查看的區域，因此不應出現白色區域。

任何幫助將不勝感激，因為我已經在此工作了幾天。

謝謝

Answer 1

例如，將％更改為Pixels。

.index{
    height:1000px;
    padding: 0;
}

Answer 2

謝謝你們的幫助

通過評論和答案，我能夠弄清自己的愚蠢之處，試圖強迫標簽定義頁面背景而不是使用正文。 即。

之所以將其定義為section標簽，是因為它在以前的頁面上使用，在上接有另一個section，因此空白區域不會成為問題。 （也是對height：100％的原因；因為我必須將段的高度定義為100％才能在段內完全創建圖像。

再次感謝。