如何讓一個div背景可見無需添加文本

Question

我有以下CSS主要包裝DIV屬性：

div#mainWrapper { 
    margin: auto; 
    width:70em; 
    height:100%; 
    background: url(../images/header.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 

我想使整個DIV和它的brackground是可見的，即使在div本身是空的。

如果可能，我不想使用position:fixed或position:absolute。

Answer 1

除非您在父容器中設置高度，否則#mainWrapper的高度將計算爲0，您將看不到背景圖像或顏色。

將高度設置爲100px以仔細檢查圖像是否正確加載。

如果您想使用相對高度，請確保您的body和html標記的高度爲100％。

Answer 2

這可能是您的HTML或body元素不夠大。 height:100%只會填補父容器高度，使你可以添加以下到您的CSS：

html, body 
{ 
    height:100%; 
} 

http://jsfiddle.net/unt9M/演示了這種使用單一顏色的背景。刪除我上面描述的CSS，你會發現div只是單行，因爲body和HTML不夠大。

Answer 3

請問你父有任何風格爲width和height？

如果父是body然後再嘗試這樣的：

CSS

html,body{ 
    width:100%; 
    height:100%; 
} 

div#mainWrapper { 
    margin: auto; 
    width:70em; 
    height:100%; 
    background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

JSFiddle

Answer 4

地址：

body,html{ 
    height:100%; 
} 

請參閱http://jsfiddle.net/derekstory/xU2g9/

請注意，我添加了背景色來顯示示例。