CSS background-size Property
Example
div {
border: 5px dashed black;
padding: 10px;
background: url(smiley.png);
background-repeat: no-repeat;
}
#example1 {
background-size: auto;
}
#example2 {
background-size: 200px 100px;
}Hello World!
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Meaning
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
| Default value: | auto |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
background-size: auto|length|cover|contain|percentage|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| 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. |
| length | Specifies 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. |
| 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. |
| percentage | Specifies 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. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
background-size: ;
}