CSS background-size Property

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.

🐊 Alligator.io recommends _⤵

ⓘ About this affiliate banner

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);
}