background-repeat

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; 
}

Values

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.

Syntax

background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2};

• Initial value: repeat
• Applies to: All elements
• Inherited: No
• Percentages: N/A
• Computed value: list, each item a pair of keywords, one per dimension
• Animation type: Discrete

The 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

The background shorthand property

The 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 */
}

Multiple backgrounds

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.

Demo

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;.

Browser support

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.

IE	Edge	Chrome	Firefox	Safari	Opera
All	All	All	All	All	All

iOS	Chrome Android	Firefox Android	Android Browser	Opera Mobile	Android Browser
All	All	All	All	All	4.4+

round and space values

The round and space values haven’t always enjoyed full browser support like repeat, no-repeat, repeat-x, and repeat-y. But they’re solidly supported everywhere today!

Multiple backgrounds

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+

Related tutorials

Related properties