How to stretch and scale CSS background?

Problem:

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.

Solution:

The code:

HTML:

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

CSS:

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

Explanation:

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.