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;
}
答
只是使身体和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%。
答
问题是背景是在div上,div不够大。如果您必须对DIV的背景下,尝试这样的事情:
.myDiv, body, html {
width:100%;
height:100%;
padding:0;
margin:0;
}
的jsfiddle:http://jsfiddle.net/jdwire/V7KSb/3/
答
要达到100%的div的高度在所有的浏览器,你需要同时设置:html
和body
到100%的高度,但也适用于以下样式是应该采取一切可用的高度DIV:
min-height: 100%;
height: auto !important;
height: 100%;
对不起,不知何故,我编辑您的文章的链接小提琴,而不是我的,它得到了已获得批准。我们的帖子非常相似。两者都有jsFiddle链接在同一个位置,我感到困惑。 – 2013-03-01 16:27:28
啊谢谢 - 太简单了! – Sven 2013-03-01 16:28:33
是的,我也犯了同样的错误!现在所有固定! – harryg 2013-03-01 16:28:41