background-repeat
background-repeat determines whether and how a background image tiles. It is useful for patterns, icons, and decorative motifs that need controlled repetition.
Overview
background-repeat determines whether and how a background image tiles. It is useful for patterns, icons, and decorative motifs that need controlled repetition.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
2-value Two-value syntax (different values for x & y directions) | 3 | 12 | 13 | 5 | 18 | 4 |
multiple backgrounds Multiple backgrounds | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
no-repeat | 1 | 12 | 1 | 1 | 18 | 1 |
repeat | 1 | 12 | 1 | 1 | 18 | 1 |
repeat-x | 1 | 12 | 1 | 1 | 18 | 1 |
repeat-y | 1 | 12 | 1 | 1 | 18 | 1 |
round | 30 | 12 | 49 | 8 | 30 | 8 |
space | 30 | 12 | 49 | 8 | 30 | 8 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.pattern {
background-image: url('dot.png');
background-repeat: space;
}
.stripe {
background-repeat: repeat-x;
}Live demo
Use cases
Pattern fills
Tile subtle textures or repeating motifs behind sections without extra markup.
Single decorative icons
Prevent accidental tiling when a background image should appear only once.
Cautions
- Tiled backgrounds can quickly become visually noisy if the pattern is too strong.
- Repeat settings should be paired with size and position choices so the effect remains intentional.
Accessibility
- Repeated decoration should stay low-contrast enough that it does not compete with text or controls.
Related links
Powered by web-features