background-size CSS property specifies the size of the background images.
The following table summarizes the usages context and the version history of this property.
|Yes. See animatable properties.
|New in CSS3
The syntax of the property is given with:
The example below shows the
background-size property in action.
ExampleTry this code »
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size property is typically used to create full size background images that scale according to the size of viewport or witdh of the browser.
The following table describes the values of this property.
|Sets the width and height of the background image to the specified length. The first value sets the width, and the second value set the height. If only one value is specified the second is assumed to be
auto. Negative length values are not allowed.
|Sets the width and height of the background image to the percentage of the background positioning area. The first value sets the width, and the second value sets the height. If only one value is specified the second is assumed to be
auto. Negative percentage values are not allowed.
auto value for one dimension scales the background image in the corresponding direction such that its intrinsic proportion is maintained. If
auto value is specified for both the dimensions, then the background image contains its own width and height, which is default behavior.
|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.
|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.
|Sets this property to its default value.
|If specified, the associated element takes the computed value of its parent element
background-size property is supported in all major modern browsers.