Question

我正在尝试让我的背景图像显示在标题div中，但它没有显示。有人能说出我做错了什么吗？

css代码：

#header{
width:900px;
/*background-color:#009999;*/
background-image:url('../images/background_img.jpg');
float:left;
text-align:center;
}

html代码

<body>
<div class="contentwrapper">
<div id="header">
hello

<!--<div id="logo">
    <img src="images/small_gama_logo.png" />
</div>
<div id="company_name">
    <h1>Gama Corporate Services Sdn Bhd</h1>
</div>-->
</div>
<div id="navbar">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div>

Answer 1

尝试为DIV设置高度。它不会根据您的背景图像自动调整大小。

Answer 2

为div添加高度。

如果删除它，它实际上仍会显示，因此您必须真正检查img的路径以及名称。确保它是正确的，并且img存在于您想要的目录中。

#header{
width:900px;
/*background-color:#009999;*/
background-image:url('http://placehold.it/200x200');
float:left;
text-align:center;
height: 200px;
}

我复制/粘贴您的代码并仅添加了高度，更改了img位置，因此您的代码很好。一定是img的问题。

http://jsfiddle.net/Kyle_Sevenoaks/qtenp/

Answer 3

设置#header的height属性

#header{
 width:900px;
 height: 400px;
 /*background-color:#009999;*/
 background-image:url('../images/background_img.jpg');
 float:left;
 text-align:center;
}

Answer 4

您现在使用高度

#header{
height:100px;
}

Answer 5

最有可能是背景图片的URL不正确（请注意它与CSS文件的URL相关）。此外，background-image可以被更具体的CSS规则覆盖。

另外，在http://jsfiddle.net

上查看实时示例会非常有帮助

css背景图像不显示在div中

5 个答案: