background-repeat
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
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.