网站HTML横幅无法显示求助：附代码及排查情况

问题排查与修复 #

1. 容器固定高度截断内容 #

你的#header设置了height: 40px固定高度，但内部.alert-box的padding:13px 16px加上文字行高，实际高度远超过40px，导致横幅被容器截断，无法正常显示。

修复：
移除固定高度，让容器自适应内容，或改用最小高度保留基础占位：

#header {
  background-image: url("./background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  background-size: cover;
  top: 0;
  /* 移除固定高度 */
  min-height: 40px; /* 可选：保留最小高度 */
  width: 100%;
}

2. 中文引号导致背景图加载失败 #

background-image路径使用了中文引号“./background.jpg”，浏览器无法识别正确的URL，会导致背景图加载失效，需替换为英文双引号：

background-image: url("./background.jpg");

3. 可选优化 #

HTML中的<br>标签会产生额外间距，若不需要可直接移除：

<div id="header">
  <div class="alert-box">
    <span class="badge">Announcement</span>Announcement text here (I'm not sharing this)
  </div>
</div>

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