Sizing Background Images

In this lesson, we will use the background-size property to define the size of our background images. Let's begin!

Using cover and contain for enhanced control

All background images are displayed at the size you created them. This kind of sizing does not fit every situation, and you need more control to handle the displayed size of the image.

The background-size property is the tool you can use in these situations. You can use the cover or contain keyword, specify exact pixel sizes, or use percentage values, like in these samples:

Get hands-on with 1200+ tech skills courses.