CSS’s ‘space’ and ‘round’ Values for background-repeat

If you’ve seen the code for CSS border images then you’re probably familiar with the space and round values for the border-image-repeat property.

Well, in the CSS spec, the well-known background-repeat property now includes those same two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with).

To demonstrate what these new values do, here are some screenshots and accompanying explanations.

Value: repeat

First, for comparison, here’s the code using a value of repeat:

.element {
  width: 550px;
  height: 400px;
  background-image: url(bg.png);
  background-position: 0 0;
  background-repeat: repeat;
}

And naturally, you could express it in shorthand, like this:

.element {
  background: transparent url(bg.png) repeat 0 0;
}

(The values transparent and 0 0 are just example values for background-color and background-position, but those aren’t really necessary.)

And here’s the way it would look in your browser (this is a screen shot):

Value: space

Next, here’s the code in shorthand that uses a value of space:

.element {
  background: transparent url(bg.png) space 0 0;
}

And here’s how it would look in a supporting browser (this is a screen shot):

So what’s happening here? Well, the clear difference between the previous example and this one is the fact that the background image is not being cut off at the element’s boundary — either vertically or horizontally. A value of space causes the image to be ‘spaced’ out evenly across the width and height of the element, to ensure it’s not being cut off.

Value: round

Next, here’s a value of round:

.element {
  background: transparent url(bg.png) round 0 0;
}

Which would have this result (this is a screen shot):

So what’s the difference here? Well, you’ll notice that each instance of the image is now slightly larger, and there is no space between the images. So the round value causes the background image to be scaled up and/or down until it can repeat throughout the width and height of the element without being cut off.

Browser Support?

Although browser support for these values was slow to be adopted by all browsers, browser support for these is now excellent, with all modern browsers supporting them, even going back to IE10.

So these values are safe to use in most projects. But check your own browser stats to make sure, because this isn’t exactly the kind of thing that can degrade gracefully in certain circumstances. You’ll have to provide a background fallback just in case.

Background image courtesy of vintage vector ornaments by Vectorian.net