求助：.hero元素背景图片无法显示问题排查

尝试为.hero元素设置居中铺满的背景图片，但图片完全无法显示，DevTools中该图片属性旁出现警告标识。曾尝试将背景图设置在body标签上、移除CSS中的position absolute属性，还调整了图片路径的写法（使用单引号、../、./等），但均未解决问题。

相关代码：

.hero {
  background-image: url("https://picsum.photos/100/100") center center/cover
    no-repeat;
  margin-top: 8rem;
  padding: 11.5rem 2rem 8rem;
  position: relative;
  overflow-x: hidden;
}

<header class="hero">
  <div class="container-heroflex">
    <div class="hero-content">
      <h1>Create your own video courses</h1>
      <p>
        dive deep into the world of creativity and learn to craft stunning
        videos that captivate your audience
      </p>
      <a href="#" class="btn">29$ Get Course</a>
    </div>
    <div class="hero-img">
      <img src="https://picsum.photos/300/300" alt="header-course" />
    </div>
  </div>
</header>

问题核心是CSS属性使用错误：background-image仅用于指定背景图片的URL，不能直接附加center center/cover no-repeat这类控制背景位置、尺寸、重复方式的参数——这些属于background复合属性的内容。浏览器无法解析错误的属性值，因此出现警告且图片无法显示。

修正方式有两种：

方式1：使用background复合属性（推荐） #

将所有背景相关设置合并到background属性中：

.hero {
  background: url("https://picsum.photos/100/100") center center/cover no-repeat;
  margin-top: 8rem;
  padding: 11.5rem 2rem 8rem;
  position: relative;
  overflow-x: hidden;
}

方式2：拆分单独设置背景属性 #

分别定义各个背景相关属性：

.hero {
  background-image: url("https://picsum.photos/100/100");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 8rem;
  padding: 11.5rem 2rem 8rem;
  position: relative;
  overflow-x: hidden;
}

任选一种修改后，背景图片即可正常显示并实现居中铺满的效果。

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