CSS背景图片无法显示求助：响应式设计场景下的问题排查

想实现响应式设计，觉得在CSS中设置两张不同图片比在HTML里操作更便捷，但设置的背景图片始终无法显示。尝试过调整尺寸、更换样式，还把图片从图片文件夹移到了HTML/CSS所在的文件夹，都没效果，代码如下：

代码 #

CSS 代码 #

* {
  margin: 0;
  box-sizing: border-box;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--main-background);
  position: relative;
}

.card {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 400px;
  background-color: var(--card-background);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image {
  background-image: url(./image-header-mobile.jpg);
  width: 100%;
}

HTML 代码 #

<body>
  <main>
    <section class="card">
      <div class="image"></div>
      <div class="info"></div>
    </section>
  </main>
</body>

解决方法 #

• 给.image容器设置高度：背景图片需要依附有尺寸的容器才能显示，当前.image只有宽度没有高度，容器高度为0，自然看不到图片。可以设置固定高度（比如height: 150px;），或者用padding-top按图片宽高比撑开（适合响应式，比如图片宽高比为2:1时，设置padding-top: 50%;同时搭配height: 0;避免额外高度）。
• 完善背景图显示属性：添加background-size和background-position确保图片正确适配容器，示例代码：

  .image {
    background-image: url(./image-header-mobile.jpg);
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
  }
  

• 确认图片路径与文件名：检查文件名大小写（部分系统区分大小写），确保图片确实和CSS文件在同一目录，路径./image-header-mobile.jpg无误。
• 响应式切换图片：用媒体查询实现不同屏幕尺寸切换图片，比如桌面端替换为另一张图：

  @media (min-width: 768px) {
    .image {
      background-image: url(./image-header-desktop.jpg);
    }
  }
  

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