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

FIDDLE
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%.