CSS Background Size

CSS Background Size

The CSS background-size property controls the displayed size of a background image within an element.

Background images can be displayed at their natural size, resized to specific dimensions, scaled relative to the background positioning area, or automatically enlarged or reduced using cover and contain.

auto

The initial value of background-size is auto auto. For an ordinary image with intrinsic dimensions, this normally displays the background image at its natural size.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-size: auto;
}

Our landscape image is 1200 pixels wide and 800 pixels high. If the element is smaller than the image, only part of the image may be visible unless other background properties change how it is displayed.

Length Values

A background image can be resized using CSS length values such as pixels.

.box {
  background-size: 600px 400px;
}

The first value sets the width of the background image and the second sets its height.

You can also specify one dimension and use auto for the other. For an image with an intrinsic aspect ratio, this allows the browser to calculate the other dimension while preserving that ratio.

.box {
  background-size: 600px auto;
}

Percentage Values

Percentage values size the background image relative to its background positioning area.

.box {
  background-size: 50% auto;
}

This makes the background image 50% as wide as the background positioning area while allowing its height to be calculated automatically.

.box {
  background-size: 100% 100%;
}

This forces the background image to match both the width and height of the positioning area. If their aspect ratios are different, the image will be stretched or compressed.

Two-Value background-size Syntax

When two values are specified, the first controls the background image's width and the second controls its height.

.box {
  background-size: 500px 300px;
}

Setting both dimensions independently can distort an image if the new width and height do not preserve its original aspect ratio.

Using auto for one dimension is often useful when you want to control one size while preserving the image's natural proportions.

cover

The cover value scales the background image so the entire background positioning area is covered while preserving the image's aspect ratio.

.box {
  background-size: cover;
}

If the proportions of the image and the background area are different, part of the image is cropped. The background area remains completely covered.

The background-position property becomes especially important with cover because it determines which part of the image remains visible when cropping occurs.

contain

The contain value scales the background image so the entire image fits inside the background positioning area while preserving its aspect ratio.

.box {
  background-size: contain;
}

Unlike cover, the complete image remains visible. However, part of the background area can remain uncovered when the image and element have different proportions.

If background repetition is enabled, the scaled image can repeat into the remaining space.

cover vs contain

The main difference between cover and contain is whether filling the entire background area or displaying the entire image takes priority.

The best choice depends on the purpose of the background. A large decorative photograph commonly uses cover, while contain can be useful when keeping the complete background graphic visible is more important.

Background Size and Repeat

The size of a background image affects how many times it can repeat within an element.

.box {
  background-image: url("images/pattern-200x200.png");
  background-size: 100px 100px;
  background-repeat: repeat;
}

Although the original pattern image is 200 x 200 pixels, this example displays each background tile at 100 x 100 pixels. More tiles can therefore fit within the same background area.

This technique can be useful for adjusting the scale of repeating patterns and textures without modifying the original image file.

Background Size Example

The following example uses our landscape photograph with background-size: cover. The image fills the entire box while keeping its original proportions.

.box {
  background-image: url("images/landscape-1200x800.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Open the example in the editor and change cover to contain, auto, 50% auto, or a specific size such as 450px 300px. The landscape and its stack of stones make the changes in scaling and cropping easy to see.