background-clip Description:
The background-clip property determines the background painting area. You can use this property when layering multiple background images to change where the various images are clipped in the box.
background-clip in CSS Versions:
background-clip Syntax:
background-clip: box;
Box has the values:
border-box(default)
The background is painted within the border box—underneath the border.padding-box
The background is painted within the padding box. The border is outside the background image.content-box
The background is painted within the content box. The border and padding are outside the background image.
background-clip Initial Value:
border-box
background-clip Applies To:
All elements.
background-clip Inheritance:
This property is not inherited.
background-clip Browser Support:
- Android 2.2+
- Chrome 4+
- Firefox 3.6 (with
-moz-prefix) and 4+ - Internet Explorer 9+
- iOS Safari 4+
- Opera 10.0/10.1 (with
-oprefix) and 10.5+ - Opera Mini 5.0+
- Opera Mobile 10.0+
- Safari 5+
background-clip Examples:
See the background-clip examples.
Clip to the padding box:
p {
background-image: url("images/dog.jpg");
background-clip: padding-box;
}
Clip to the content box:
p {
background-image: url("images/dog.jpg");
background-clip: content-box;
}
background-clip Special Notes:
- The
background-clipwill have no affect on theHTMLelement because the root element of a document has a different painted area. - Remember that if the painted area is the default or
border-boxthe background image will be painted behind the border.
