css Question posted in
Some basic documentation can be found here.

Css – 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>
Tags:

3

Answers


  1. 0

    You need to separate background-image the position, size, and repeat in different line.

    .hero {
        background-image: url('../images/header-background.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-top: 8rem;
        padding: 11.5rem 2rem 8rem;
        position: relative;
        overflow-x: hidden;
    }
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    You can try using this code:

    .hero {
background: url('../images/header-background.jpg') center center / cover no-repeat;
margin-top: 8rem;
padding: 11.5rem 2rem 8rem;
position: relative;
overflow-x: hidden;

    }

    I hope this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search