CodeinWP CodeinWP

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

10 Responses

  1. Scott says:

    In the demo, the boxes with “space” and “round” values do not repeat the background image in Chrome. I guess that’s where the false positive comes from – it’s obviously recognising the value in some respect because it’s doing something different to the default.

    I wonder if these values are all that useful in real situations? I haven’t seen many occurrences of single-image repeating backgrounds, only tileable images like stripes, noise, textures etc.

  2. Yo says:

    Your examples work on page in Chrome 13.0.782.112
    So I guess it’s only FF5 which doesn’t support these.

  3. Nice, but when even Firefox and Chrome don’t support it, they are pretty useful right now (you remember, otherwise everybody loves to say that about Internet Explorer ;) ).

  4. Luke says:

    “Yes, hell has frozen over”

    some css gimmick doesnt make IE a better browser… it just means, they rather focus on b**s**t than make important things work… (because they just cannot)

  5. johnbmull says:

    Backgrounds are displaying as described on my iPad 1.0 using Atomic web browser. Just an FYI.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).