CSS3 background-size Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The 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.
| Default value: | auto auto |
|---|---|
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the background-size property in action.
Example
Try this code ».box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
}Tip: The 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.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| length | 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. |
| percentage | 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 |
An 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. |
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. |
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. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element background-size property. |
Browser Compatibility
The background-size property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Background, CSS3 Background.
Related properties: background, background-attachment, background-color, background-image, background-clip, background-position, background-repeat, background-origin.
