This topic has not yet been rated - Rate this topic

background-size property

[This documentation is preliminary and is subject to change.]

Sets or retrieves the size of the background images.

CSS Backgrounds and Borders Module Level 3, Section 3.9

Syntax

background-size: auto | contain | cover | <percentage> | <length>

Property values

auto: Default. See Remarks.
contain: Scale 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.
cover: Scale 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.
length: A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see the CSS Values and Units Reference.
percentage: An integer, followed by a percent (%). A percentage value is relative to the background positioning area.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value

Standards information

CSS Backgrounds and Borders Module Level 3, Section 3.9

Remarks

An auto value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension. If either of these values is not available, the image's intrinsic size is used. If the image's intrinsic size is not available, it is assigned the value of 100%. If both values are auto, use the intrinsic width, height, or both, of the image. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for contain.

Negative values are not allowed.

In a Metro style app using JavaScript, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

The background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

background-size property

Syntax

Property values

CSS information

Standards information

Remarks

See also