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.
— Sorry to interrupt this program! 📺
Are you interested in learning React? If so, I highly recommend you try Wes Bos' React for Beginners or Fullstack Advanced React & GraphQL course.
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your web dev skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
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);
}