为什么我的背景图片不显示？

Question

我的 header 图片无法显示的原因是什么？（对未来的任何建议将不胜感激！）

您将在下面看到我当前的语法。我想添加一个 jsfiddle link，但由于所有内容都指的是我计算机上的图像，我认为上传整个文件夹会更容易。 HERE 是 link 到

html

<head>
    <title>index</title>
    <link href="style.css"  rel="stylesheet"  type="text/css" />
</head>
<body>
    <div id="container">    
        <div id="header"></div><!-- end header -->

        <div id="menu">
            <ul>
                <li><a href="index.php"><img border="0" id="homebutton" alt="" src="img/home button.png" width="145px" height="auto"></a></li>
                <li><a href="about.php"><img border="0" id="aboutbutton" alt="" src="img/about button.png" width="145px" height="auto"></a></li>
                <li><a href="gallery.php"><img border="0" id="gallerybutton" alt="" src="img/gallery button.png" width="145px" height="auto"></a></li>
                <li><a href="contact.php"><img border="0" id="contactbutton" alt="" src="img/contact button.png" width="145px" height="auto"></a></li>
            </ul>
        </div><!-- end menu -->

        <div id="content"></div><!-- einde content -->      
    </div><!-- end container -->    
</body>

css

#container {
    margin: 0px auto;
    padding: 10px;
    width: 1300px;
}

#header {
    background-image: url("img/header.png");
    background-repeat: no-repeat;
    width: 1300px;
    height: auto;
    max-height: 275px;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

#menu ul li  {
    float: left;
}

Answer 1

那是因为在页眉中，您仅将 max-height 和 height 设置为 auto，您应该包含一个 min-height 以使其显示。

Answer 2

尝试将 max-height: 275px; 更改为 min-height:275px;

div没有内容所以默认为0px高

Answer 3

您使用图像作为背景，但背景是什么？（我的意思是没有header的大小div所以背景无法显示）

您必须增加 <div id="header"></div>

的大小 (width/height)

Answer 4

你实际height是0px，所以你看不到。你也需要写一个大小，比如height: 10px；或 min-height: 10px.

Answer 5

在您的 #header 上，更改

 height:auto;

类似于

height: 200px; //or whatever the height of your img is

这里的问题是您的 div 默认为 height: 0px;，因此没有空间显示您的图片。

或者，您至少需要在 div 上设置一个 min-height 才能显示图像。

Answer 6

首先，为您的 header 设置一个高度。当您设置 max-height 时，您是说高度不能超过该数字，但您的 header 是空的，因此高度将为 0。

其次，注意路径。可能在您的 HTML 中路径是 img/image.png，但您的 css 文件位于名为 styles 的文件夹中。如果是这种情况，请记住添加样式文件夹中图像的相对路径，background-image: url("../relative/path/to/image.png");

Answer 7

您的问题是 css、#header 样式。请尝试 width:100px 而不是 width:auto。（例如 100px）。这对我有用。

Answer 8

如果您的 HTML 文件在根目录下，图像上的语法就没问题，但也可以代替：
background-image: url("img/header.png");
background-image: url("/img/header.png"); （注意 url 处的“/”）

或者图像的名称。或者扩展名。

为什么我的背景图片不显示？

Why won't my background image show?

html

css

image

header