background-size

The background-size CSS property sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.

Values: contain Scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat. cover Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally. auto Scales the background image in the corresponding direction such that its intrinsic proportions are maintained. <length> Stretches the image in the corresponding dimension to the specified length. Negative values are not allowed. <percentage> Stretches the image in the corresponding dimension to the specified percentage of the background positioning area.

Syntax example: background-size: cover;