If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat.
html {
background-image: url(logo.png);
background-repeat: repeat-x;
}The background-repeat property accepts the following values:
/* Single value syntax */
background-repeat: repeat; /* Default value */
background-repeat: repeat-x;
background-repeat: repeat-y
background-repeat: no-repeat;
background-repeat: round;
background-repeat: space;
/* Two value syntax: <horizontal> | <vertical> */
background-repeat: repeat no-repeat;
background-repeat: round space;
background-repeat: repeat round;
background-repeat: no-repeat space;
background-repeat: round no-repeat;
/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;repeat: Tiles the image in both directions. This is the default value.repeat-x: Tiles the image horizontally.repeat-y: Tiles the image vertically.no-repeat: No tiling; the image is shown just once.round: Tiles, but never crops, the image as many times as it will fit and stretches the image’s width or height if it needs to. So, if it’s less than half one image width left, stretch, if it’s more, stretch.space: Tiles, but never crops, the image as many times as it will fit with even spaces between each tile.background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2};repeatThe background-repeat property accepts one or two values. A single value sets the background image’s repeating pattern in both the horizontal and vertical directions. Two values individually set the repeating pattern in each direction, respectively.
| Single value | The same as… |
|---|---|
repeat-x | repeat no-repeat |
repeat-y | no-repeat repeat |
repeat | repeat repeat |
space | space space |
round | round round |
no-repeat | no-repeat no-repeat |
background shorthand propertyThe background-repeat property is a constituent of the background shorthand property. It follows the background-size in the order of operations:
body {
background:
url(sweettexture.jpg) /* background-image */
top center / 100px 100px /* background-bposition / background-size */
no-repeat /* background-repeat */
fixed /* background-attachment */
padding-box /* background-origin */
content-box /* background-clip */
red; /* background-color */
}You can also comma-separate multiple values if you’re dealing with multiple backgrounds. Let’s say we have an element with two background images:
.some-element {
background-image: url("star-outline.svg"), url("star-filled.svg");
}We can set the background-repeat behavior for each one on the same declaration as long as we separate them with commas:
.some-element {
background-image: url("star-outline.svg"), url("star-filled.svg");
background-repeat: no-repeat, repeat-x;
}Without the comma, CSS will simply think you’re using the single-value syntax and setting the vertical and horizontal directions for both background images.
And, yes, we can indeed comma-separate the two-value syntax as well:
.some-element {
background-image: url("star-outline.svg"), url("star-filled.svg");
background-repeat: no-repeat repeat-x, no-repeat repeat-y;
}In other words, there are many, many possibilities for configuring how background images repeat with as many background images as we want.
Compare the repeating patterns for each property value — and combinations of them — using the controls in the following demo.
The differences between repeat, round, and space are clearer to see when you’re able to resize the element that contains the background image. Update the size of each example in the following demo to compare the different behaviors.
The round value is super helpful in those pretty rare times that you need to display the full background image for each repetition without cropping or altering it. The following demo uses a background image to form a border around an element using background-repreat: round to prevent the border from clipping the image as it would with default repeat behavior.
Try adjusting the size of the box to see how round forces the full image to display, no matter what size the box is.
Or, hey, maybe you’ve got hamburger on the brain and decide to use a round repeat to create a stack of full-size patties. Resize the following demo vertically to make a larger burger.
Here’s another fun demo with hamburgers demonstrating background-repeat: round;.
The background-repeat property is supported everywhere and always has been, except Android’s built-in browser, which lacked support between versions 2.1 to 4.3.
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
.hero { background-attachment: fixed; }
.element { background-blend-mode: screen; }
.element { background-clip: padding-box; }
.element { background-color: #ff7a18; }
.element { background-image: url(texture.svg); }
.element { background-origin: border-box; }
.element { background-position: 100px 5px; }
.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