CSS background-size Property
CSS background-size property specifies the size of the background image for an element.
CSS background-size property accept 3 different types of values:
- keywords (e.g. auto, cover, and contain)
- width (e.g. width of the image and height will be auto)
- width height (e.g. width of the image, height of the image)
Usages
The following table outline the usages and version history of this property.
| Default value: | auto |
| Applies to: | All elements |
| Inherited: | No |
| Version: | CSS3 |
| JavaScript Syntax: | object.style.backgroundSize = "40px 60px" |
Syntax
Here is a syntax for the CSS background-size property
background-position: auto | cover | contain | length | percentage | initial | inherit;
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| auto | Default. Specifies that background image is displayed in original size |
| cover | Specifies that background image is resized and cover the entire container of an element |
| contain | Specifies that background image is resized and scales the image as much as possible to ensure image is fully visible |
| length | Sets width and height of the background image for an element |
| percentage | Sets width and height of the background image in percent relative to the element |
| initial | Sets default value of this property |
| inherit | Inherits this property from its parent element. |
Examples
The example below shows to sets background size auto, cover, contain, length, percentage values.
.auto {
background-size: auto;
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
.length_width {
background-size: 50px;
background-repeat: no-repeat;
}
.length {
background-size: 50px 80px;
background-repeat: no-repeat;
}
.percentage_width {
background-size: 50%;
background-repeat: no-repeat;
}
.percentage {
background-size: 100% 100%;
}
Browser Compatibility
- Google Chrome 4+
- Mozilla Firefox 4+
- Internet Explorer 9+
- Opera 10.5+
- Safari 4.1+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.