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.
