Background Size

The background image for any element retains its original size. To adjust the image size, we need to use the background-size property.

When this property is set to cover, the image stretches or scales down in size to fill the entire container:

As you can see above, the image stretches its width and height proportionately to fill up the entire space. If you resize the window, you can see that the image is either cropped at the bottom or at the right.

If instead, we want the image to be fully visible, the background size property can be set to contain:

We can also specify the exact width and height in pixels or percentage:

If only one value is specified, the width is set to that value and height is auto-adjusted: