How to stretch and scale CSS background?


There is a background for a container. The problem is that the background doesn’t cover the contents of that container. Now you need to stretch or scale to fill its container.


The code:


<div class= “container”>There is a stretched background behind this container<br><br><br> This is end


    background: url(example.jpg);
    background-size: 100% 100%; /*background-size: width height*/
    background-repeat: no-repeat;


background-size defines the size of the background. The first value is for width, second is for height. So by setting the value of background-size to “100% 100%”, the background fits the width and height of the container. “background-repeat: no-repeat” prevents the background images to be repeated.