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
See the Pen background-repeat by CSS-Tricks (@css-tricks) on CodePen.
Interactive demo on how space
and round
work, as compared to repeat
:
See the Pen The Different `background-repeat`s by Chris Coyier (@chriscoyier) on CodePen.
Related
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-size
Resources
Browser Support
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
1+ | 1+ | 1+ | 3.5+ | 4+ | 1+ | 1+ |
The comma-separated multiple value synta only supported in Firefox 3.6+ and IE 9+. The two-value syntax for controlling horizontal and vertical values separated only supported in Firefox 13+ and IE 9+. The round
and space
keywords are only Firefox 49+ and IE 9+.
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.