在BODY中渲染DIV的背景图像
[英]Rendering a background-image for DIV within BODY
问题描述
I have the following styles for my page: 
我的页面有以下样式：
<style>
html, body {
margin: 0;
padding: 0
}
body {
background-color: rgb(5, 77, 179);
text-align: center
}
.contentarea {
background-image: url('path-to-this-image.png')
}
.class {
background-image: url('path-to-another-image.png')
}
</style>
There are two DIV tags within the body: 体内有两个DIV标签：
<body>
<div class="contentarea">
</div>
<div class="class">
</div>
</body>
When I try to load the page, only a blue background appears. 当我尝试加载页面时，仅显示蓝色背景。 Why is this? 为什么是这样？ I'm using Chrome > v.25. 我正在使用Chrome> v.25。
2 个解决方案
解决方案1
0 已采纳 2013-11-30 19:43:43
CSS: CSS：
.contentarea {
background-image: url('path-to-this-image.png');
height: Height of image in px; // or 100%
}
.class {
background-image: url('path-to-another-image.png');
height: Height of image in px; // or100%
}
If you don't have text inside the div you have to give height. 如果div内没有文本，则必须指定高度。 Also, don't forgot to add semicolon ; 另外，不要忘记添加分号; at the end of css property 在CSS属性的末尾
解决方案2
0 2013-11-30 20:53:54
Adding to the previous: to make it work with 100% set element property as "display:block;". 添加到上一个：使它与100％一起将元素属性设置为“ display：block;”。 It should work. 它应该工作。 So your css can look like this: 因此，您的CSS可能如下所示：
body{
background-color: rgb(5, 77, 179);
text-align: center
}
.contentarea {
background-image: url('path-to-this-image.png');
width:100%; /*or whatever*/
min-height:80%; /*or whatever*/
display:block;
}
.class {
background-image: url('path-to-another-image.png');
width:100%; /*or whatever*/
min-height:80%; /*or whatever*/
display:block;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.