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％宽度和高度的背景图像不起作用

回答

相关问题