Style backgroundSizeProperty
Style ObjectExample
Specify the size of the background image:
document.getElementById("myDIV").style.backgroundSize="60px 120px";
Try it yourself »
Definition and Usage
The backgroundSize property sets or returns the size of the background image.
Browser Support
IE9+, Firefox, Opera, Chrome, and Safari support the backgroundSize property.
Syntax
Return the backgroundSize property:
object.style.backgroundSize
Set the backgroundSize property:
object.style.backgroundSize="auto|length|cover|contain|intial|inherit"
Property Values
| Value | Description |
|---|---|
| auto | Default value. The background image keeps its width and height. |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second value is set to "auto". |
| percentage | Sets the width and height of the background image as a percentage of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second value is set to "auto". |
| cover | This will maintain the image's aspect ratio and scale the image to the smallest size that will completely cover the background area. Some parts of the background image may not be displayed within the background positioning area. |
| contain | This will maintain the image's aspect ratio and scale the image to the largest size that will fit the content area. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | auto |
|---|---|
| Return value: | A string, representing the background-size property of an element. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:background-size property
Other Extensions