CSS background-size Property

The background-size CSS property sets the rendered size of an element's background image. By default a background image is shown at its natural (intrinsic) size; background-size lets you scale it to exact dimensions, stretch it by percentages, or have it automatically fill or fit the element.

This page covers every value the property accepts, the difference between the two most useful keywords (cover and contain), how it behaves with multiple backgrounds, and runnable examples for each case. It is one of the CSS3 properties.

Values at a glance

The property accepts these values:

auto — the default. The image keeps its intrinsic size and proportions.
<length> — explicit width and height, e.g. 300px 200px. Negative values are invalid.
<percentage> — sizes relative to the element's background positioning area, e.g. 40% 100%. Negative values are invalid.
cover — scale the image (keeping its aspect ratio) until it fully covers the element. Overflow is cropped.
contain — scale the image (keeping its aspect ratio) until it just fits inside the element. Gaps may be left.

When you give two values, the first is the width and the second is the height. If you give only one value, it sets the width and the height defaults to auto, so the image keeps its aspect ratio.

cover vs. contain — which to use

These two keywords are the ones you reach for most often, and they are easy to confuse:

cover guarantees there is no empty space — the image always fills the box. The trade-off is that parts of the image may be cropped when its aspect ratio doesn't match the element. Use it for hero banners and full-bleed section backgrounds where you never want gaps.
contain guarantees the whole image is visible — nothing is cropped. The trade-off is that empty strips can appear on the sides or top/bottom. Use it for logos, icons, or any image you must show in full.

Both keep the original aspect ratio, so the image is never distorted. To stretch an image to exact dimensions (which can distort it), use explicit <length> or <percentage> values instead.

Images with and without intrinsic size

Some images, such as JPEG and PNG, have intrinsic sizes and proportions. Others, such as CSS gradients, don't. An image without an intrinsic size takes up the full size of the element's background area unless you state otherwise, so background-size behaves a little differently with gradients than with raster images.

Multiple background images

background-size accepts comma-separated values. When an element has several background images, each size is matched to a background image in order — the first value applies to the first background-image, the second to the second, and so on:

background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;

Initial Value	auto
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	Yes. The size of the background image is animatable.
Version	CSS3
DOM Syntax	object.style.backgroundSize = "50% 100%";

Syntax

Syntax of CSS background-size Property

background-size: auto | length | percentage | cover | contain | initial | inherit;

The background-size property is often used with the background shorthand, for example:

background: url("image.jpg") no-repeat center / cover;

Example of the `background-size` property:

Example of CSS background-size Property with px value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 300px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Try it Yourself »

Result

In the above example, the length value is applied. It sets the width and height of the background image. The first value sets the width, and the second value sets the height. If one value is given, the second is set to auto.

See another example where the width and the height of the background-image are defined by percentages.

Example of the `background-size` property with the "%" value:

Example of CSS background-size Property with % (percentage) value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 40% 100%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Try it Yourself »

The cover value makes the image as large as possible without stretching the image.

Example of the `background-size` property with the "cover" value:

Example of CSS background-size Property with cover value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Try it Yourself »

Example of the `background-size` property with the "contain" value:

Example of the CSS background-size property with the "contain" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: contain;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Try it Yourself »

Example of the `background-size` property with the "auto" value:

Example of the CSS background-size property with the "auto" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: auto;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background size example.</h2>
    <p>Here can be any information.</p>
  </body>
</html>

Try it Yourself »

Example of the `background-size` property with a single length value:

Here a single value (260px) is given, so the width is set explicitly and the height falls back to auto, preserving the image's aspect ratio inside a fixed-size <div>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 260px;
        height: 190px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
        background-size: 260px;
      }
    </style>
  </head>
  <body>
    <h1>CSS background-size property </h1>
    <p>Example of the background-size property with a length value.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
auto	This is the default value. It sets the background-image in its original size.	Play it »
length	Sets the width and height of the background image. The first value sets the width and the second one sets the height. If only one value is given, the second one is set to auto. It is specified by “px”, “em”.	Play it »
percentage	Sets the width and the height by percentages. The first value sets the width and the second one sets the height. If only one value is given, the second one is set to auto.	Play it »
cover	Scales background image as large as possible to cover all the background area.	Play it »
contain	Scales background image to the largest size so that its width and height can fit inside the background area.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

background-size is commonly combined with background-position and background-repeat to control exactly how the image is placed and scaled.
In the background shorthand, the size comes after the position, separated by a slash: background: url("image.jpg") no-repeat center / cover;. The position is required when you supply a size this way.
To scale an <img> element (rather than a CSS background) while controlling cropping, use object-fit, which offers the same cover and contain behaviour for replaced elements.
cover and contain make full-page or responsive backgrounds simple: pairing background-size: cover with a fixed background-attachment produces a classic full-bleed hero that scales to any viewport.

Practice

In CSS, what are the possible values for the 'background-size' property?

Values at a glance

cover vs. contain — which to use

Images with and without intrinsic size

Multiple background images

Syntax

Example of the background-size property:

Result

Example of the background-size property with the "%" value:

Example of the background-size property with the "cover" value:

Example of the background-size property with the "contain" value:

Example of the background-size property with the "auto" value:

Example of the background-size property with a single length value:

Values

Tips and related properties

Practice

Example of the `background-size` property:

Example of the `background-size` property with the "%" value:

Example of the `background-size` property with the "cover" value:

Example of the `background-size` property with the "contain" value:

Example of the `background-size` property with the "auto" value:

Example of the `background-size` property with a single length value: