background-repeat

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 horizontally
• repeat-y: tile the image vertically
• no-repeat: don’t tile, just show the image once
• space: 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.

Another resizing demo, showing a “fake” border:

See the Pen
Fitted Border Image the Easy Way by ShopTalk Show (@shoptalkshow)
on CodePen.

Here’s another fun demo with hamburgers demonstrating background-repeat: round;.

Related

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-size

Resources

• CSS3 Spec
• MDN

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