CSS：將背景圖像拉伸到100％的寬度和高度的屏幕？

Question

我有一個名爲myImage.jpg的圖像。這是我的CSS：

body { 
    background-image:url("../images/myImage.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 

出於某種原因，我這樣做的時候，MYIMAGE的寬度在整個屏幕上延伸，但身高只有延綿，直到一切都在網頁上的其他人的高度。所以，如果我把一堆

<br> 

在我的html頁面，那麼高度會增加。如果我的HTML網頁只包含一個

<div id='header'> 
    <br> 
</div> 

那麼背景圖像的高度將只是一個

<br> 

高度如何讓我的背景圖像的高度的100％用戶正在使用哪個屏幕查看網頁？

Answer 1

您需要的html設置高度爲100%

body { 
    background-image:url("../images/myImage.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 
html { 
    height: 100% 
} 

http://jsfiddle.net/8XUjP/

Answer 2

html, body { 
    min-height: 100%; 
} 

會做的伎倆。

默認情況下，即使html和body只與它們保存的內容一樣大，但不會超過窗口的寬度/高度。這往往會導致相當奇怪的結果。

你也可能需要閱讀http://css-tricks.com/perfect-full-page-background-image/

有一些偉大的方式來完成達到很好的和可擴展的完整背景圖像。

Answer 3

我會建議background-size: cover;如果你不想你的背景就失去它的比例：JS Fiddle

html { 
    background: url(image/path) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

來源：http://css-tricks.com/perfect-full-page-background-image/