How to make a background image fit width, and height should auto-scale in proportion with CSS?

Spread the love

Sometimes, we want to make a background image fit width, and height should auto-scale in proportion with CSS.

In this article, we’ll look at how to make a background image fit width, and height should auto-scale in proportion with CSS.

How to make a background image fit width, and height should auto-scale in proportion with CSS?

To make a background image fit width, and height should auto-scale in proportion with CSS, we set the background-size and background-repeat properties.

For instance, we write

body {
  background-image: url(images/background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

to set the background image with the background-image property.

Then we use background-size: cover; to fill the container with the background image.

We use background-repeat: no-repeat; to stop the background image from repeating.

And we center the background image with background-position: center center;.

Conclusion

To make a background image fit width, and height should auto-scale in proportion with CSS, we set the background-size and background-repeat properties.

Leave a Reply

Your email address will not be published.