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.