background-size
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.
Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 3 | 12 | 4 | 5 | 18 | 4.2 | |
auto | 1 | 12 | 3.6 | 3 | 18 | 2 |
contain | 3 | 12 | 3.6 | 5 | 18 | 4.2 |
cover | 3 | 12 | 3.6 | 5 | 18 | 4.2 |
background-size Values of `background-size` longhand | 21 | 12 | 9 | 5.1 | 25 | 4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Implementation note
- WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (3.6)
Removed
- This feature was removed in a later browser version (4)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Implementation note
- WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Implementation note
- WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Implementation note
- WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.
Syntax
CSS
.hero {
background-image: url('hero.jpg');
background-size: cover;
}
.icon-bg {
background-size: 32px 32px;
}Live demo
Use cases
-
Responsive hero surfaces
Scale background art to cover or contain a surface while preserving a consistent visual treatment.
-
Pattern control
Tune repeated motifs or decorative assets so they feel balanced inside the component.
Cautions
- cover can crop important areas, while contain may leave empty space that changes the intended composition.
- Large scaled backgrounds can become blurry or visually heavy if source assets are not chosen well.
Accessibility
- When decorative backgrounds change size, keep text contrast and legibility stable at every breakpoint.