CSS：100％寬度和高度的背景圖像不起作用

我希望背景圖像覆蓋整個可用空間而不會被擠壓。
其實我以爲這是background-size是什麼，但我想我做錯了，因爲它不工作，請幫助我。CSS：100％寬度和高度的背景圖像不起作用

HTML

<div class="myDiv"> 
    <p class="paragraph">Lorem Ipsum</div> 
</div>

CSS

body { 
    background-color: black; 
} 

.myDiv { 
    color: white; 
    background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
    background-size: cover; 
}

FIDDLE
http://jsfiddle.net/V7KSb/

來源

2013-03-01 Sven

只是使身體和HTML 100％的高度和同樣對於DIV

body, html{ 
    height:100%; 
    padding:0; 
    margin:0; 
} 
.myDiv { 
    color: white; 
    background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
    height:100%; 
    padding: 20px; 
    box-sizing: border-box; 
}

見琴：http://jsfiddle.net/V7KSb/5/

更新：給myDiv一些填充，並用box-sizing: border-box;，以確保它不走大於100％。

來源

2013-03-01 16:22:58 harryg

對不起，不知何故，我編輯您的文章的鏈接小提琴，而不是我的，它得到了已獲得批准。我們的帖子非常相似。兩者都有jsFiddle鏈接在同一個位置，我感到困惑。 – 2013-03-01 16:27:28

啊謝謝 - 太簡單了！ – Sven 2013-03-01 16:28:33

是的，我也犯了同樣的錯誤！現在所有固定！ – harryg 2013-03-01 16:28:41

問題是背景是在div上，div不夠大。如果您必須對DIV的背景下，嘗試這樣的事情：

.myDiv, body, html { 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
}

的jsfiddle：http://jsfiddle.net/jdwire/V7KSb/3/

來源

2013-03-01 16:24:22

要達到100％的div的高度在所有的瀏覽器，你需要同時設置：html和body到100％的高度，但也適用於以下樣式是應該採取一切可用的高度DIV：

min-height: 100%; 
height: auto !important; 
height: 100%;

來源

2013-03-01 16:29:38

CSS：100％寬度和高度的背景圖像不起作用

回答

相關問題