如何展開背景圖片來覆蓋整個HTML元素？

Question

我想要獲得一個HTML元素（body，div等）的背景圖像來伸展它的整個寬度和高度。

沒有多少運氣。除了作爲背景圖像之外，還有可能還是需要以其他方式進行操作？

我現在的CSS是：提前

body { 
    background-position: left top; 
    background-image: url(_images/home.jpg); 
    background-repeat: no-repeat; 
} 

感謝。

編輯：我不熱衷於在Gabriel的建議中維護CSS，所以我改變了頁面的佈局。但是，這似乎是最好的答案，所以我把它標記爲這樣。

Answer 1

不確定是否可以拉伸背景圖像。如果您發現在所有目標瀏覽器中都不可能或不可靠，則可以嘗試使用z-index設置得較低的拉伸img標籤，並將位置設置爲絕對，以使其他內容顯示在其上。

讓我們知道你最終做了什麼。

編輯：我的建議基本上是什麼在gabriel的鏈接。所以試試:)

Answer 2

你不能在純粹的CSS。將圖片覆蓋整個頁面後面的所有其他組件可能是您最好的選擇（看起來像是上面給出的解決方案）。無論如何，無論如何，它可能會看起來很糟糕。我會嘗試使用足夠大的圖片來覆蓋大多數屏幕分辨率（比如1600x1200，比它更稀少），限制頁面的寬度，或者僅使用圖片。

Answer 3

要在@PhiLho答案擴展，你可以在頁面上居中一個非常大的圖像（或任何尺寸圖像）：

{ 
background-image: url(_images/home.jpg); 
background-repeat:no-repeat; 
background-position:center; 
} 

或者你可以使用一個較小的圖像與背景顏色相匹配的圖像的背景（如果是純色的話）。這可能會或可能不適合您的目的。

{ 
background-color: green; 
background-image: url(_images/home.jpg); 
background-repeat:no-repeat; 
background-position:center; 
} 

Answer 4

使用background-size屬性：http://www.w3.org/TR/css3-background/#the-background-size

Answer 5

<style> 
    { margin: 0; padding: 0; } 

    html { 
     background: url('images/yourimage.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
</style> 

Answer 6

總之你可以試試這個....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" > 

當我用一些CSS和JS。 ..

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" /> 
<script src="js/jquery-1.7.1.min.js"></script> 
<script src="js/jquery.mobile-1.0.1.min.js"></script> 

它對我來說工作得很好。

Answer 7

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Answer 8

如果你有一個大的景觀形象，在這裏這個例子調整大小在縱向模式的背景下，使之顯示在頂部，底部留下空白：

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

body { 
    background-image: url('myimage.jpg'); 
    background-position-x: center; 
    background-position-y: bottom; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

@media screen and (orientation:portrait) { 
    body { 
     background-position-y: top; 
     -webkit-background-size: contain; 
     -moz-background-size: contain; 
     -o-background-size: contain; 
     background-size: contain; 
    } 
} 

Answer 9

下面的代碼我使用大多爲實現問效果：

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

Answer 10

如果需要伸展你的背景圖片，而調整屏幕，你不需要與舊版本的瀏覽器的兼容性，這將做的工作：

body { 
    background-image: url('../images/image.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
}