CSS background-size Property

The background-size property defines the size of the background image. This property has five values: auto, length, percentages, cover, contain.

Auto sets the background image in its original size. It's the default value. Length specifies the height and the width of the background image. Negative values are invalid. Percentage sets the height and the width of the background-image specified by percentages. Here also the negative values are invalid.

Cover scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no space remains.

Contain resizes the background image so that the image is fully visible.

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

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

Example

<!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>

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

<!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>

Let’s see an example with cover value. It makes the image as large as possible without stretching the image.

Example

<!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>

Values

Value Description
auto This is the default value. It sets the background-image in its original size.
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”.
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.
cover Scales background image as large as possible to cover all the background area.
contain Scales background image to largest size, so that its width and height can fill inside the content area.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

15.0+ 12.0+ 4.0+
3.6 -moz-
7.0+ 11.5+
10.1 -o-

Practice Your Knowledge

___ sets the background image in its original size. This is the default value.




Related articles