The CSS background-size property specifies the size of the background image of the object. It is currently only supported in Gecko 2.0 (Firefox 4.0) and IE9. Safari, Chrome, and Opera must use their own vendor extensions, -webkit-background-size and -o-background-size.
Values[]
Multiple values apply to individual background layers, from front to back, in the same manner as for all other background properties.
| Value | Description |
|---|---|
<percentage> |
Scales the background image in the desired dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.
|
<length> |
Scales the background image to the specified length in the desired dimension. |
auto |
Scales the background image in the relevant direction such that its intrinsic proportions are maintained. The first value determines how the image is scaled horizontally, the second how it is scaled vertically. If only one value is specified, the second value is implicitly auto. If both values are auto, the image is used as the background at its original size. Negative sizes are not allowed.
|
contain |
Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. |
cover |
Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area. |
CSS examples:
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
}