在BODY中渲染DIV的背景图像

时间:2013-11-30 19:39:38

标签: html css

我的页面有以下样式:

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

正文中有两个DIV标记:

<body>
    <div class="contentarea">
    </div>
    <div class="class">
    </div>
</body>

当我尝试加载页面时,只显示蓝色背景。为什么是这样?我正在使用Chrome&gt; V.25。

2 个答案:

答案 0 :(得分:0)

<强> 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%
    }

如果div内没有文字,你必须给出高度。另外,不要忘记在css属性

的末尾添加分号;

答案 1 :(得分:0)

添加到上一个:使其使用100%set element属性作为“display:block;”。它应该工作。所以你的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;
  }