Question

我的简单html页面包含body和header elements：

<body>
    <header class="logoBar"></header>
</body>

我尝试将背景图片添加到header。如果我这样做：

.logoBar {
   background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
}

它不显示图像。但如果我做：

body {
    background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
}

我看到了图像。为什么它不适用于header？

谢谢。

Answer 1

您必须为标头设置width和height。如果它没有内容，它将只是0px宽和0px高。

.logoBar {
   background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
   width: 900px;
   height: 300px;
}

演示：http://jsfiddle.net/Zjczp/

Answer 2

尝试在标题元素的CSS上设置宽度和高度。

.logoBar {
   width: 100%;
   height: 250px; <!-- Your image height goes here...
   background:url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;
}

Answer 3

现在定义您的班级.logobar

的价值

就像这样

.logobar{display:block;}

并根据 width和height

定义@WDffy和@Cristy

标题不显示背景图像

3 个答案: