Media Temple Hosting

CSS3′s ‘space’ and ‘round’ Values for background-repeat

on | 8 Comments

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

Well, in the CSS3 spec, the well-known background-repeat property now includes those 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?

Browser support for these new values is pretty awful right now. The only supporting browsers are Opera 10.5+ and IE9+. Yes, hell has frozen over — IE has support for a CSS3 feature that Firefox 5 and Chrome 13.x (and currently 15.x dev) do not.

Update (Aug. 16/2011): I forgot to mention that IE10PP renders the value “round” improperly, cutting off the image at the border edge. I’ve sent a bug report through IE10 to deal with this.
Update (Aug. 16/2012): Ironically, this update is exactly one year later… After much prodding, Microsoft eventually fixed the bug (or so they claimed), so this should now be working fine in IE10, even though hardly anyone can test it.

What About Detecting Support with Modernizr?

Theoretically, you could use Modenrizr and then do something like this:

.element {
	width: 550px;
	height: 400px;
	background: transparent url(bg.png) repeat 0 0; /* for all browsers */
}

.bgrepeatspace .element {
	background-repeat: space; /* for supporting browsers */
}

The first block of code would apply to all browsers, then — after Modernizr adds the appropriate classes to the <html> element — you just use that hook in your CSS to give supporting browsers a value that overrides the previous one, but only specifying the background-repeat property.

So, I checked out the Modernizr docs and it had no mention of support for detecting these values. So I talked to Paul Irish and he added it to Modernizr on Github. So using that extra bit of code, you can get Modernizr to add classes of bgrepeatspace and bgrepeatround to the <html> element, then use the CSS hook I showed you above.

I’ve set up a demo page that will print out different messages for support/nonsupport, using something like this:

if (Modernizr.bgrepeatspace && Modernizr.bgrepeatround) {
	// live life to the fullest
} else {
	// Cry in your beer
}

In this example, I’m assuming both values are supported. You could test for one or the other, but it seems logical to test for both.

Unfortunately…

Update (Feb. 15, 2014) Chrome now uses the Blink engine, their own fork of WebKit, and this is working correctly in Chrome 32 with no false positive, contrary to what is reported below. Thanks to Estelle for the heads-up.

So what’s the problem with this? Well, it seems that WebKit is spitting out a false positive for those values. Thus, even though Chrome and Safari do not support those values, Modernizr still adds them as if they are supported. This is obviously quite annoying and really limits what you can do with these values. I filed a bug report here, so we’ll see what happens with that.

Use the button below to view the demo. The message that’s displayed on the page will tell you if your browser supports it or not (or thinks it does, as is the case with Chrome and Safari).

And if anyone want’s to try to figure out why WebKit gives false positives, there’s a JSBin here.

Special thanks to Russ Weakley for first notifying me of these new features via this cool slideshow. And of course to Paul Irish for adding this to Modernizr on GitHub.

Update (Aug. 16/2011) Thanks to Divya Manian for letting me know about Opera support.

Background image courtesy of vintage vector ornaments by Vectorian.net

8 Responses

  1. 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:

    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:

    “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. Backgrounds are displaying as described on my iPad 1.0 using Atomic web browser. Just an FYI.

  6. Thank for your article … saved me a few hours

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.