background-size defines the size of a background image within its containing element.
background-size can be defined with either length, percentage or keyword* values. The 2 possible keywords are:
- contain: Scales the image as much as possible while keeping the aspect ratio and avoids clipping the image.
- cover: Again, scales the image and maintains its aspect ratio, but this time the image will fill the whole area of the element and some clipping may occur.
When providing a percentage value, itβs a percentage of coverage of the containing element.
To define both a width and a height, youβll provide 2 space-separated values. Therefore, background-size: 30% 40% would be for a width of 30% and a height of 40%. If only one value is provided, the height will be set to auto.
When an element has multiple background images, you can also define a list of comma-seperated size values to define different sizes for each image.

This affiliate banner helps support the site π
Letβs see the effects of the two keywords: contain & cover:
background-size: contain
.alligator-show-box {
background-size: contain;
background-image:
url(/images/police.svg);
}
background-size: cover
.alligator-show-box {
background-size: cover;
background-image:
url(/images/police.svg);
}