CSS property: background-size

Description

Specifies the size of the background images.

Syntax

background-size: <size> [ , <size> ]*;

Values

<size>

[ <length> | <percentage> | auto ]{1,2} | cover | contain

The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.

If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for contain.

<length>Negative values are not allowed.
<percentage>A percentage is relative to the background positioning area. Negative values are not allowed.
auto (by default)An auto value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%.
coverScale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
containScale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

Versions

Examples

p {
    background-image: url(image.png);
    background-size: 15px 15px;
}