Can't understand why my background image doesn't display

I am trying to make the background image display on .hero, which means the image will be at the center of the page, but the image doesn't display at all. In "devtools", it shows a warning sign next to the image.

I tried to put the image on the body and eliminate the position absolute that I put in the CSS; however, it didn't affect the results. Please help. I thought the position absolute might push other elements like the .hero class, which has the background image. I also tried writing it in several ways with '' and with two dots and even with one dot.

.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>

Solution

Quoting from CSS background docs

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Simply use the background property instead of background-image like this:

.hero {
  background: url('https://m-sarabi.ir/assets/personal-header.jpg') 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>
</header>