2種背景的CSS最佳方法？

Question

我有一個設計，在背景的前25％有一些圖像，然後它只是一個簡單的漸變，我可以重複其餘的。

將圖片放在最上方，然後用漸變填充頁面的其餘部分的最佳方法是什麼？

我把這個方法：

html{ 
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0; 
} 

body { 
    text-align: center; 
    font-family: Arial; 
    line-height: 1; 
    width: 100%; 
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px; 
} 

但在一個執行的代碼爲HTML背景圖像不顯示？

任何幫助？

Answer 1

Contrar y已經說了什麼，你可以有一個背景爲html。

你的方法幾乎在那裏，請試試height: 100%和min-height: 100%。

http://jsbin.com/omikuy

html, body { 
    margin: 0; 
    padding: 0; 
} 
html { 
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0; 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    text-align: center; 
    font-family: Arial; 
    line-height: 1; 
    width: 100%; 
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px; 
} 

Answer 2

這樣做將有身體背景的梯度，只是創建一個div與下面的類圖像的最佳方式：

.div_bg { 

position:absolute; 
width:100%; 
height:100px; (or whatever) 
top:0px; 
background-image:whatever; 
repeat:repeat-x; 

} 

並確保HTML有這個（給elimate空白在上面）：

html { 
margin: 0 auto; 
} 

Answer 3

跨瀏覽器，而不是語義

最跨瀏覽器的解決辦法是有一個包裝<div>周圍所有的C然後在網站上應用一種背景，然後在背景上應用一種背景。

少跨瀏覽器的，但更多的語義

您也可以嘗試使用僞元素申請一個背景：

body:after { background: .... } 

最跨瀏覽器，但大多數語義

最先進的方法是在CSS3中使用多個背景

body { background: url(...) top center, url(...) top center repeat-y }