CSS background-size property

The background-size CSS property is used to set the size of a background image of an element. The background image can be stretched or constrained to fit into the existing space. It allows us to control the scaling of the background image.

This property can be defined using length, percentage, or keyword values. It has two possible keyword values that are contain and cover. Its single-value syntax defines the width of the image (in this case, the height sets to auto), whereas the double values define the value of both height and width in which the first value sets the width and second sets the height.

If an element has multiple background images, we can define the comma-separated values to define the different sizes of each one.

The cover value of the background-size property is used to cover the entire background area of the element. In contrast, the contain value of this property scales the image as much as possible without clipping the image.

Syntax

The values of this property are defined as follows.

Property Values

auto: This is the default value, which displays the background image in its original size.

length: It is used to set the width and height of the background image. This value stretches the image in the corresponding dimension of the given length. Its single value specifies the width of the image, and the height sets to auto. If two values are given, the first value sets the width, and the second value sets the height. It does not allow negative values.

percentage: This value defines the width and height of the background image to the percentage (%) of the background positioning area. Negative values are not allowed.

cover: This value is used to resize the background image to cover the entire container. Sometimes, it crops the little bit off one of the edges or stretches the image. It resizes the image to ensure the element is completely covered.

contain: Without stretching or cropping, it resizes the background image to ensure the image is completely visible.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Let's understand this CSS property by using some illustrations.

Example

In this example, there are three div elements with a width of 300px and a height of 200px. Every div element has a background-image on which we are applying the background-size property.

Here we are using the length and percentage values to set the background-size of div element. The background-size of first div element set to auto, second div element is set to 150px 150px, and the background-size of third div element is set to 30%.

Output

Now, in the next example, we are using the cover, contain, and initial values of the background-size property.

Example

Output

Example - Combining multiple images

We can also combine the values of this property and can apply them to multiple images. It can be done by comma-separated syntax.

In this example, there are three div elements, each having two background-images. Now, we are applying the background-size property on both images.

Output