background-repeat

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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

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

IEEdgeChromeFirefoxSafariOpera
AllAllAllAllAllAll
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
AllAllAllAllAll
Source: caniuse

Multiple backgrounds support

IEEdgeChromeFirefoxSafariOpera
9+AllAll3.6+All11.5+
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
AllAllAll90+62+
Source: caniuse

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

ChromeFirefoxIEEdgeSafari
324910127

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
94924.47.0-7.1

More information

Related properties