css - 100% 宽度和高度背景图像不起作用

Question

我希望背景图像覆盖整个可用空间而不会被压扁。
实际上我认为这background-size就是目的，但我想我做错了什么，因为它不起作用，请帮助我。

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;
}

小提琴
http://jsfiddle.net/V7KSb/

Answer 1

只需将 body 和 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%。

Answer 2

问题是背景在 div 上，而 div 不够大。如果您必须在 div 上有背景，请尝试以下操作：

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

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

Answer 3

要在所有浏览器中实现 100% 的 div 高度，您需要同时设置:html和body100% 高度，但还要将以下样式应用于应该采用所有可用高度的 div：

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

Answer 4

试试这个：

.myDiv:before {
                position: absolute;
                background: url(../images/ig.png);
                background-size: cover;
                width: 100%;
                height: 100%;
              }