在Header中放置图片与导航菜单，子区域布局问题排查

核心问题及修复步骤： #

1. CSS选择器匹配错误
   你的HTML中是一个id="img"的<div>容器，但CSS里写的#header img是用来选择<header>下的<img>标签，完全不匹配目标容器。需要把选择器改成#header #img（或直接#img）。

2. 容器无尺寸，背景图无法渲染
   id="img"的div默认高度为0、宽度未设置，即使背景图路径正确，也没有展示空间。必须给这个容器设置明确的width和height，或者用min-height、内边距撑开。

3. 路径正确性验证（可选排查）
   确认img/despikes-header.jpg的文件路径是否正确：

   • 若HTML文件在网站根目录，该路径对应根目录下img文件夹内的图片；
   • 若HTML在子文件夹，需调整为相对路径（比如../img/despikes-header.jpg）。

修正后的CSS示例： #

#header{
    height: 300px;
    background: black;
}
/* 修正选择器并添加容器尺寸 */
#header #img{
    background-image: url("img/despikes-header.jpg");
    background-repeat: no-repeat;
    width: 100%;
    height: 200px; /* 可根据图片实际尺寸或布局需求调整 */
}   
#navbar{
    color: white;
    font-size: .9em;
    font-weight: normal;
    font-family: Tahoma, Arial, sans-serif;
    font-variant-caps: all-small-caps;
    text-decoration: none;
    float: left;
    text-align: center;        
} 
#navbar ul{
    height: auto;
    padding-top: 8px;
    padding-left: 20px;
}                
#navbar li{
    display: inline;
    padding: 3px;
}

额外优化建议： #

如果这个元素就是用来展示头部图片，更推荐使用语义化的<img>标签替代背景图，写法如下：

<div id="header">
    <img id="header-img" src="img/despikes-header.jpg" alt="网站头部">
    <div id="navbar">        
        <ul>
            <li><a href="home.html">home</a></li>
            <li><a href="band.html">band</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </div>
</div>

这种方式不需要额外设置容器尺寸，浏览器会自动根据图片大小渲染，也更利于SEO。

内容的提问来源于stack exchange，提问作者Maud