HTML/CSS：header下方全屏背景图不显示，求问题排查

我来帮你一步步排查这个背景图不显示的问题，大概率是这几个常见坑之一：

• 先检查背景图路径是否正确
  这是最容易踩的坑！如果你的CSS写在单独的.css文件里，背景图的路径是相对于CSS文件的位置，而不是HTML文件。举个例子：

  • 要是HTML在根目录，CSS放在css/style.css，图片在images/bg.jpg，那CSS里的路径得写成../images/bg.jpg（得从css文件夹退回到根目录，再进入images文件夹）
  • 如果是用内联CSS（写在HTML的<style>标签里），路径规则就和你HTML里的<img>一样，比如你用了images/thumb2.jpg，那背景图如果在同个文件夹，直接写images/your-bg.jpg就行

• 确保容器有足够的高度（关键！）
  要让背景图铺满整个页面高度，你得先给html和body设置100%高度，不然它们只会自适应内容的高度。另外，如果你是给header下方的容器加背景，得确保这个容器能占满剩余空间。

  给你一个能实现需求的CSS示例：

  html, body {
    height: 100%;
    margin: 0; /* 去掉默认边距，避免出现不必要的滚动条 */
    padding: 0;
  }
  
  header {
    position: relative;
    z-index: 1; /* 让header始终在背景图上方，不会被覆盖 */
    background: #fff; /* 给header加个背景色，防止下方背景图透上来 */
    /* 可以根据你的header内容设置高度，比如height: 80px; */
  }
  
  /* 专门用来放背景图的容器 */
  .bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 让背景图处于header的下层 */
    background-image: url('images/your-bg.jpg'); /* 替换成你的背景图路径 */
    background-size: cover; /* 铺满容器，同时保持图片比例 */
    background-position: center; /* 让图片居中显示 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    margin-top: 80px; /* 这里的数值要和你的header高度一致，避免背景图被header挡住顶部 */
  }
  

• 检查CSS属性是否完整
  别只写background-image，最好配合background-size、background-position、background-repeat这些属性一起用，不然图片可能会重复显示、只露出一小部分，甚至因为容器高度不够直接看不到。

• 验证图片本身是否能正常访问
  直接在浏览器地址栏输入图片的完整路径（比如http://你的网站地址/images/your-bg.jpg），看看能不能打开。如果打不开，说明图片文件损坏或者没上传对，得重新检查文件。

对应的HTML结构可以调整成这样：

<body>
  <header>
    <p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
    <p class="btn2"><span>你的其他header内容</span></p>
  </header>
  <div class="bg-container"></div>
  <!-- 这里放你页面的其他内容 -->
</body>

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