CSS3′s ‘space’ and ’round’ Values for background-repeat
If you’ve seen the code for CSS3 border images then you’re probably familiar with the
Well, in the CSS3 spec, the well-known
To demonstrate what these new values do, here are some screenshots and accompanying explanations.
And naturally, you could express it in shorthand, like this:
(The values
And here’s the way it would look in your browser:
And here’s how it would look in a supporting browser:
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
Which would have this result:
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
The first block of code would apply to all browsers, then — after Modernizr adds the appropriate clases to the
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
I’ve set up a demo page that will print out different messages for support/nonsupport, using something like this:
In this example, I’m assuming both values are supported. You could test for one of the other, but it seems logical to test for both.
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.
Background image courtesy of vintage vector ornaments by Vectorian.net
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 ofrepeat:- .element {
- width: 550px;
- height: 400px;
- background-image: url(bg.png);
- background-position: 0 0;
- background-repeat: repeat;
- }
- .element {
- background: transparent url(bg.png) repeat 0 0;
- }
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:
Value: space
Next, here’s the code in shorthand that uses a value ofspace:- .element {
- background: transparent url(bg.png) space 0 0;
- }
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;
- }
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? Awful
Browser support for these new values is pretty awful right now. The only supporting browsers are Opera (not sure which version had it first) 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.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 */
- }
<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
- }
Unfortunately…
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.
Background image courtesy of vintage vector ornaments by Vectorian.net
CSS3′s ‘space’ and ’round’ Values for background-repeat
![CSS3′s ‘space’ and ’round’ Values for background-repeat]()
Reviewed by BloggerSri
on
12:08 AM
Rating:
1 comment:
Great post, much appreciated!
Post a Comment