How to add a 100% width background image with an ‘auto’ height with CSS?

Spread the love

To add a 100% width background image with an ‘auto’ height with CSS, we set the background-position and background-size properties.

For instance, we write

body {
  background-image: url(img.jpg);
  background-position: center top;
  background-size: 100% auto;
}

to add the background-position property to center the background image.

And we add background-size: 100% auto; to make the background image fill the body element.