# background-size property

The `background-size` property specifies a size of a background image. The property value is any size units, or the `auto`, `cover` or `contain` keywords.

## Syntax

`selector { background-size: value; }`

## Keywords

Value | Description
--- | ---
`auto` | The background will have a natural size, the same as the real size of the background image. If `auto` is specified for only one side, then on this side the background will be scaled so as to have undistorted proportions.
`cover` | Scales the image so that it covers the entire block while maintaining its proportions. The image will try to fit entirely, but this will not always work, so some part of it will be cut off. The block will always be covered by the entire image.
`contain` | Scales the image so that it fits entirely into the block while maintaining its proportions. In this case, it can occupy either the entire width or the entire height (depending on the image proportions and the element size). In the general case, the block will not be completely covered by the image (but the entire image will always be visible, albeit in a reduced version).

Default value: `auto`.

## Usage

Size units and `auto` can be used in various combinations, for example: `auto 20px`, or `30% 20px`, or `auto 30%` and so on. In this case, the first parameter sets the background width, and the second parameter sets the background height. If one parameter is specified, it will set the background in both width and height at the same time.

## Example

Now the background image will have its natural size:

`<div id="elem"></div>` `#elem { background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 550px; height: 400px; }`

:

## Example

Now the background image will have a size of `300px` by `400px` (in our case, the image proportions will be distorted):

`<div id="elem"></div>` `#elem { background-size: 300px 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Example

Now the background image will be `400px` by `400px` (in our case, the image proportions will be distorted):

`<div id="elem"></div>` `#elem { background-size: 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Example

Now the background image will be `400px` horizontally, and its vertical size will be adjusted so that the proportions are not distorted:

`<div id="elem"></div>` `#elem { background-size: 400px auto; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Example

Now the background image will be `400px` vertically, and its horizontal size will be adjusted so that the proportions are not distorted:

`<div id="elem"></div>` `#elem { background-size: auto 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Example . The contain value

Look at how the `contain` value works:

`<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div>` `.elem { background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }`

:

## Example . The cover value

Look at how the `cover` value works:

`<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div>` `.elem { background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }`

:

## Example . Let's improve the work of cover

The performance of the `cover` value can be improved if you center the image using the `background-position` property (in our case, the horses’ heads will appear on the visible parts, and not their butts):

`<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div>` `.elem { background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }`

:

## See also

- the `background` property
  that is a shorthand property for a background

← →
↑
en ru