Understanding background-size in CSS

The CSS background-size property determines the size of a background image for an element. The image can be left at its original size, stretched, or limited to fit the available space; there are numerous variations and syntaxes to set these behaviors.

The background-size property values could be keyword values, unit values (such as percentages or pixels), or global values (such as those in the below code block):

.card-hero{
  background-size: cover| 30%| 300px 250px| inherit
}

This article will investigate the background-size property in CSS and how it works and will review examples for its property values.

Jump ahead:

• Keyword values
  • contain
  • cover
• Unit values
• Global values
  • inherit
  • initial
  • unset
• One value
• Two value
• Multiple images
• Browser support

Let’s start by taking a look at the background-size property values to see how they function.

Keyword values

Using the keyword values contain and cover, we can change the size of a background image. Let’s look at some examples of each keyword value.

contain

When we set the contain value on the background-size property, the background image will resize to ensure the image is fully visible. This keyword value scales the image to fit within its container as much as possible without cropping or stretching.

If the container element is larger than the image, this will result in image tiling (in which multiple copies are displayed side-by-side) to fill the negative space, unless the background-repeat property is set to no-repeat:

See the Pen
background-size-contain by King nelson (@D_kingnelson)
on CodePen.

In the example above, the container element is larger than the image. So, if we hadn’t set the background-repeat property to no-repeat, our image would tile in an attempt to cover the entire container. It does this, rather than stretching, in order to preserve image quality.

cover

The cover value, as the name implies, ensures that the picture is scaled to fill the full container, leaving no empty space, while maintaining its ratio. If the proportions of the background image and the element differ, the image’s width or height will be cropped:

See the Pen
background-size-cover by King nelson (@D_kingnelson)
on CodePen.

Notice how the above image is stretched to completely fill the container, even if its width or height is cropped.

N.B., background-size can be set to auto; this is the property’s default value and will result in the image being displayed as its original size

Unit values

We can use unit values such as percentages or pixels to set the background-size of a background image. Here are a few examples:

.card-hero{
   background-size: 15%;
}

.card-hero{
  background-size: 400px;
}

.card-hero{
  background-size: 30vw;
}

Now, let’s look at a CodePen with a specific percentage value set for the background-size:

See the Pen
background-size-percentages by King nelson (@D_kingnelson)
on CodePen.

In this example, we set the background-size to 40%. This means that the background image would take up 40% of the container’s size; in this case, 240px (40/100 * 600 = 240) since our container width is 600px.

Notice we used the width to make our calculations. This is because when we set a single value as our background-size, it only works for the width. We’ll explain this further in the one value section.

Global values

The background-size property also accepts the following CSS-wide keyword values as its property value:

inherit

The inherit keyword changes the value of a property on an element to the value of the same property on its parent element. In other words, it compels inheritance to occur even when it would not typically occur:

.card-header{
  background-size: inherit;
}

initial

The initial keyword changes the value of a property to the specified initial value, thus resetting the value. The default setting for font-weight, for example, is normal. As a result, expressing font-weight: initial is equivalent to stating font-weight: normal.

In our situation, this would imply setting the background-size property to auto, as this is the default value:

.card-header{
  background-size: initial;
}

unset

The unset keyword can be used to replace both inherit and initial. If the property is inherited, then unset has the same effect as inherit. However, If the property is not inherited, unset has the same effect as using initial:

.card-header{
  background-size: unset;
}

One value

Whenever we set just one value on the background-size property, like that shown below, it only affects the width of the background image; the height is automatically set to auto:

.card-header{
  background-size: 50%;
}

As we’ve seen in the previous examples, we can use any CSS measurement units or keyword values.

Two value

Whenever we set the background-size property with two values, like that shown below, It affects the height and width of the background image:

.card-header{
  background-size: 40% 50%
}

The first value sets the width of the background image and the second value sets the height. Just like with one value, we can use any measurement unit.

Multiple images

CSS3 offers many properties for creating striking backgrounds, including a wonderful feature that allows us to have several background images. The syntax is simple: separate the image URLs with a comma. The trick here is to understand the stacking order of the images.

Here’s a quick mental image to help understand the stacking order: the first image we declare will stack on top of the others. Understanding how this works is essential for determining how to set the background-size when using numerous photos.

Let’s look at an example:

.card-header{
  background-image: url('first.jpg'), url('second.jpg'), url('third.jpg');
}

In this example, the images will stack in the same order as that designated by the image file names. We would use the same order to set the background-size for these images, separated by a comma, like so:

.card-header{
  background-size: 40%, 20%, 30%;
}

We could use either the one-value or two-value syntax here; both work the same way.

Here’s an example:

See the Pen
background-size-multiple-images by King nelson (@D_kingnelson)
on CodePen.

When setting multiple background images, be sure to add the background-position property to control where the images are placed in the container.

If we set the background-size on the images and they are smaller than the container, they will all stack on top of each other, leaving only the first image visible. This is where background-position comes in handy, just like in our example above.

Browser support

The background-size property has pretty solid browser support, so you don’t have to worry about it not working on some browsers or older versions:

Browser	Support
Chrome	Full support
Edge	Full support
Firefox	Full support
Opera	Full support
Safari	Full support

Conclusion

The background-size CSS property is very useful when you’re working with background images. It allows you to control the sizing of the image you set as the background of an element so that you do not lose the quality of the image.