CSS background-size property
With the background-size
property, you can control the image and either stretch it, leave it in its natural size, or shrink it to fit the container.
The contain
value scales the image to expand into the container without distorting proportions. If the container is bigger, the browser tiles the image.
In turn, the cover
value stretches the image, scaling it up to fill the container. If the image's proportions don't coincide with the element's, it gets cropped either vertically or horizontally so that no blank gaps are left.
You can use length (px
, pt
, cm
) or percentage values to set precise dimensions for an image.