The background image for any element
retains its original size.
To adjust the image size,
we need to use the
When this property is set to
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
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: