Search code examples
htmlcssimagebackgroundwidth

Why does my background image disappear when the width is 100% deleted?

I am creating a Heading, but if I dismiss the "width: 100%" the background-image does not appear any more. How does this have sense?

.img_header{
  position: absolute;
  background-image: url(space.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;   /*----> example if I dismiss this property the image disappear */
  z-index: -1;
  height: 400px;
}
Solution

  • The only thing giving it width is your CSS.

    The background image doesn’t take up any space on its own. So if you remove the width, then it will be disappear because there is no other content to give the element size.