CSS Background-Size Property

The CSS background-size property specifies the size of the background image. There are four ways to do this:

• Specify length
• Specify percentages
• Use the keyword "cover"
• Use the keyword "contain"

Specify length

The first way is to specify the dimension of the background image explicitly. This can be specified with one or two values.

One value

When only one length value is specified, it represents the width of the background image. The height of the background image is automatically adjusted to keep the aspect ratio of the image constant. An aspect ratio is the ratio between the length and the width of an image.

Two values

When two length values are specified, the first value represents the width of the background image, and the second value represents the height of the image.

Example 1: Single length value

CSS Declaration

background-image: url(cute-snowmen.jpg); background-size: 200px; background-repeat: no-repeat;

which results in the following:

Example 2: Double length value

CSS Declaration

background-image: url(cute-snowmen.jpg); background-size: 200px 120px; background-repeat: no-repeat;

which results in the following:

Notice that in this case, the background image appears distorted. This is because the specified background size has a different aspect ratio than the original image.

Specify percentages

The percentage value specifies the size of the background image in relation to the element it is in. This can be specified with one or two values.

One value

When only one percentage value is specified, it represents the percentage of the space the background image will occupy horizontally within the element. For example, if 50% is used, it means the image will take up half of the element horizontally. The height of the background image is automatically adjusted to keep the same aspect ratio.

Two values

When two percentage values are specified, the first value represents the % of element the background image will occupy horizontally, and the second value represents the % of element the background image will occupy vertically. If we want to scale the background only as a percentage of the element's height, we use the keyword "auto" as the first value.

Example 3: Single percentage value

CSS Declaration

background-image: url(cute-snowmen.jpg); background-size: 80%; background-repeat: no-repeat;

which results in the following:

In Example 3, the background image's width is 80% of the element's width.

Example 4: Double percentage value

CSS Declaration

background-image: url(cute-snowmen.jpg); background-size: 50% 80%; background-repeat: no-repeat;

which results in the following:

In Example 4, the background image's width is 50% of the element's width, and the background image's height is 80% of the element's height.

Cover

When the keyword "cover" is used, the background image is resized (with the same aspect ratio) so that the background image covers the entire element. In this case, there can be two results:

1. The width of the background image becomes the same as the width of the element, and the height of the background image becomes longer than the height of the element. Another way to look at this is that the length of the background image and the length of the element are the same in the x-axis, and the length of the background image is longer than the length of the element in the y-axis.
2. The height of the background image becomes the same as the height of the element, and the width of the background image becomes longer than the width of the element. Another way to look at this is that the length of the background image and the length of the element are the same in the y-axis, and the length of the background image is longer than the length of the element in the x-axis.

Example 5: Cover

CSS Declaration

background-image: url(cute-snowmen.jpg); background-size: cover; background-repeat: no-repeat;

which results in the following:

Notice that in Example 5, the background image covers the entire element, leaving no empty space. The height of the background image is the same as the height of the element, and the width of the background image is longer than the width of the element.

Contain

When the keyword "contain" is used, the background image is resized so that the full background image can be shown within the element. In this case, there can be two results:

1. The width of the background image becomes the same as the width of the element, and the height of the background image becomes shorter than the height of the element. Another way to look at this is that the length of the background image and the length of the element are the same in the x-axis, and the length of the background image is shorter than the length of the element in the y-axis.
2. The height of the background image becomes the same as the height of the element, and the width of the background image becomes shorter than the width of the element. Another way to look at this is that the length of the background image and the length of the element are the same in the y-axis, and the length of the background image is shorter than the length of the element in the x-axis.

Example 6: Contain

CSS Declaration

background-image: url(cute-snowmen.jpg); background-size: contain; background-repeat: no-repeat;

which results in the following:

In Example 6, the background image does not cover the entire element. The width of the background image is the same as the width of the element, and the height of the background image is shorter than the height of the element.