With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.
The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.
Description
This property is quite simple. It tells the browser how far the background should visibly extend. It accepts one of three values: border-box, padding-box, and content-box. If you set it to border-box, the background will be visible into the border areas. If you set it to padding-box, the background will not be visible in the border area, but will be visible in the padding and content area. If you set it to content-box, the background will be clipped by any padding.
Examples
The same box (100×100) is shown in all three examples above. Each box has a transparent border of 5px and 20px of inner padding on all sides. The one on the right appears much smaller because the background only shows where the inside of the padding edge starts. The one in the middle appears about 5px smaller on each side, because the background is clipped where the 5px border begins.
Naturally, in order for this property to make any difference in the way the element looks, the element needs a background of some sort, plus (in most cases) a transparent border, or else some padding.
Browser Support
Works in IE9+, Firefox 4+, Chrome 4+ (with -webkit-), Safari 4+ (with -webkit-), and Opera 10.53+ (but apparently has bugs but fixed in 11+).
background-clip with the standard syntax, FF up to version 3.6 offers partial support using -moz- — but FF3.6 does not support the value “content-box”. Complicating things even more, FF3.6 will only accept the “border-box” and “padding-box” values if you use the old syntax “border” and “padding” (no “-box”), along with the -moz- prefix. Also, FF4+ will not accept the old syntax, nor will it accept vendor prefixes, only the standard syntax. More info here.Anyone have any ideas on how this might be used? I suppose a hover state that changes the clip value could be employed. It could also be effective when used with transitions or keyframe animations. Would love to hear your feedback.
Thanks, it’s nice to see this visualized
I’ve just tried it in FF4, but it didn’t work: http://img402.imageshack.us/i/unled1to.jpg/
Yep, that’s been fixed. See comment below, plus my other added notes on FF in the article.
It works with dotted/dashed borders, if you want them to appear outside the background for whatever reason. The border could use RGBA to create a Facebook-like modal dialog with a tiled background, in only one element.
You could also use content-box with a border if you want a gap between the border and element. The problem here is that there is no visible padding on the element. I guess it would work for CSS sprites, where the icons are all lined up right next to each other in the sprite image. You can make a bit of spacing around them and add a border outside that.
I could see it being useful when designing for different devices and screen resolutions… maybe a zoom effect on hover perhaps? Anyway, nice post. Thanks :)
Here’s a cool slideshow, covering backgrounds in CSS3, by Russ Weakley that touches on some of these points and much more:
http://www.slideshare.net/maxdesign/css3-backgrounds
Informative sharing can we use it for IE8? Lots of people still using IE8
it do not work on FF4
You were right. Looks like I forgot to add the mozilla syntax for the 2nd two boxes. It’s working in FF4 now.
Interestingly, Firefox 3.6 will work (for the 2nd box) if you use the old value of “padding” instead of “padding-box”; but it still doesn’t seem to work for “content-box” or “content”.
You have brought up a wonderful information, this will add a new skill into my learning curves.
Thanks, for sharing this great tutorial.
content-box i can see being really useful when working with sprites, e.g say you have some buttons that use a sprite to draw icons. If a request comes in to increase the padding on the buttons, you don’t have to re-position all the icons in your sprite.
Got this link from Paul Irish:
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
Background-clip can be used to fix a background bleed problem when using border radius.
thank you .. good article
In Webkit browsers there is another keyword value. If you use ‘text’ the background clips at the text. Useful with large font-size headings.
Example url link is 404.
Thanks, fixed.