Take your JavaScript to the next level at Frontend Masters.
If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here’s an example:
html {
background-image: url(logo.png);
background-repeat: repeat-x;
}These are the possible values for this property (besides the usual stuff like inherit):
repeat: tile the image in both directions. This is the default value.repeat-x: tile the image horizontallyrepeat-y: tile the image verticallyno-repeat: don’t tile, just show the image oncespace: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.round: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit with leftover space, squish them or stretch them to fill the space. If it’s less than half one image width left, stretch, if it’s more, stretch.
There is also the two value syntax:
.element {
/* background-repeat: horizontal vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
}Which makes the single-value syntaxes just shorthand for the two-value syntax. For example, round is really round round.
You can also comma-separate multiple values if you’re dealing with multiple backgrounds.
Demo
Interactive demo on how space and round work, as compared to repeat:
Another resizing demo, showing a “fake” border:
Here’s another fun demo with hamburgers demonstrating background-repeat: round;.
Browser support
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| All | All | All | All | All | All |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| All | All | All | All | All |
Multiple backgrounds support
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 9+ | All | All | 3.6+ | All | 11.5+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| All | All | All | 90+ | 62+ |
round and space keyword support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 49 | 10 | 12 | 7 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 94 | 92 | 4.4 | 7.0-7.1 |
More information
CSS Basics: Using Multiple Backgrounds
How to Make Repeating Border Images
Managing Multiple Backgrounds with Custom Properties
Browser painting and considerations for web performance
Related properties
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
background-image
.element { background: url(texture.svg); }
background-origin
.element { background-origin: border-box; }
background-position
.element { background-position: 100px 5px; }
background-size
.element { background-size: 300px 100px; }
background-repeat: round space;
thank you :) @dago
Wow, never knew about “space” and “round”, however it seems it has been supported since CSS1
never knew about Space and Round either but it’s fabulous you’d think it would be better known.
can you flip backgrounds on each repeat?
Hey! Not that I am aware of, but you might try either chaining background images a la:
.element {
background:
url(bg-1.png) no-repeat,
url(bg-2.png) no-repeat, /* a flip of bg-1 */
...
…or creating on giant background image that creates the pattern.
Hi,
There might be an error about \round\ value.
You say : “If it’s less than half one image width left, stretch, if it’s more, stretch”
If there’s more than half one image width left, images will squish in order to fit