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.

Related

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

Comments

  1. User Avatar
    dago

    background-repeat: round space;

  2. User Avatar
    Hichdima
    Permalink to comment#

    Wow, never knew about “space” and “round”, however it seems it has been supported since CSS1

  3. User Avatar
    Jon McLaren
    Permalink to comment#

    never knew about Space and Round either but it’s fabulous you’d think it would be better known.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag