平鋪背景圖片停在內容底部，而不是頁面底部

Question

我試圖使背景圖像平鋪並覆蓋整個頁面，即使沒有足夠的內容來填充頁面。 現在，背景圖像停止在內容的底部。 我使用了粘性頁腳修復程序來將頁腳保持在頁面底部，因此剩下的是內容底部和頁腳之間的一堆空白。

我不想用margin或padding空間，因為這不會擴展到更大的顯示器。

我已附上問題的圖片：

在此處輸入圖片說明

這是CSS：

.static_pages {
    background-image: url('../img/cream_dust.png');
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
    width:  100%;
    height: 100%;
    margin: 0;

}

.static_content {
    width: 80%;
    margin: 3em auto 0 auto;
}
.static_content h1 {
    color: #193441;
}
.static_content p {
    color: #193441;
    text-align: left;
    margin-top: 2em;
}
.static_content ul {
    color: #193441;
}

和HTML

<?php include_once('header.php'); ?>
    <section class="static_pages">
        <div class="static_content">
            <h1>Header</h1>

                <p>A little Text</p> 

        </div><!-- END class="static_content" -->
    </section><!-- END class="static_pages" -->
<?php include_once('footer.php'); ?>

有任何想法嗎？ 我已經為此戰斗了一段時間。 謝謝！

編輯：！doctype和所有其他標頭信息在包含的header.php文件中。 這只是該網站上的幾個頁面之一。 我有一個主索引頁面，它是一個長的着陸頁面，而這是一個靜態頁面，用於聯系，聯系等內容。

Answer 1

將背景放在HTML標記上：

html {
    background: transparent url('../img/cream_dust.png') scroll repeat 0 0;
}

Answer 2

您需要使用：

正確的doctype ！
```
 <!doctype html> 
```

body背景

 body { background-image: url('../img/cream_dust.png'); background-repeat: repeat; }

全高身材！
```
 body {height: 100%;} 
```

使用不同的背景圖片：

<body class="pageOne">
<body class="pageTwo">
<body class="pageThree">

的CSS

.pageOne {background-image: url('../img/cream_dust.png');}
.pageTwo {background-image: url('../img/cream_sandwich.png');}
.pageThree {background-image: url('../img/cream_sand.png');}

平鋪背景圖片停在內容底部，而不是頁面底部

問題描述

2 個解決方案

解決方案1
1 2013-01-08 17:34:13

解決方案2
0 已采納 2013-01-08 17:17:40

您需要使用：

使用不同的背景圖片：

的CSS

平鋪背景圖片停在內容底部，而不是頁面底部

問題描述

2 個解決方案

解決方案1 1 2013-01-08 17:34:13

解決方案2 0 已采納 2013-01-08 17:17:40

您需要使用：

使用不同的背景圖片：

的CSS

解決方案1
1 2013-01-08 17:34:13

解決方案2
0 已采納 2013-01-08 17:17:40