background-size
background-size controls how large background images render inside a box. It is especially important for responsive hero panels, thumbnails, and textured surfaces.
Overview
background-size controls how large background images render inside a box. It is especially important for responsive hero panels, thumbnails, and textured surfaces.
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.
Related links
Powered by web-features