CSS Why is "height: auto;" not working?

[JakeT]

Hi,
Below I have some CSS which is displaying an image on my website however, if I set height to "auto", no image displays at all. It will only display if I set a px value.

How can I get "height: auto;" to work?

#my_image_div {
  max-width: 100%;
  height: auto;
  background-image: url("https://mywebsite.com/wp-content/uploads/2022/03/lower-blocks.png");
background-size:     cover;         
background-repeat:   no-repeat;
background-position: center center;
}

 

[OldMan]

height: auto; depends on the width size. Max-width is not a size it's a limit to the size, used when a width is given in % or vw.
Add a width dimension and see if things work.

 

[Johna]

Hi,
Below I have some CSS which is displaying an image on my website however, if I set height to "auto", no image displays at all. It will only display if I set a px value.

How can I get "height: auto;" to work?

#my_image_div {
  max-width: 100%;
  height: auto;
  background-image: url("https://mywebsite.com/wp-content/uploads/2022/03/lower-blocks.png");
background-size:     cover;        
background-repeat:   no-repeat;
background-position: center center;
}

That's because you don't have an image, but just a <div> element with an image as the background.
If your <div> element doesn't have any content in it, then it's going to be 0px in width and height.

To actually add an image, use the<img> tag.