The background-clip property specifies the area within which the background is painted.
An element in CSS has 3 areas, called boxes, defined inside it: the border box, the padding box, and the content box.
There’s also a fourth area called the margin box which includes the element and its outer margin.
The background of an element is usually painted across and within the entire border box area. This results in the fact that the background is drawn beneath the border of an element. This is the default behavior in CSS.
The background-clip property can be used to clip the background to one of the three box areas inside an element. When one box area is specified in the property, the background is clipped to the area of the specified box and will not extend beyond that area.
The background-clip property can also take comma-separated values so that when the element has more than one background image, each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on). See the examples below.
Official Syntax
-
Syntax:
background-clip: border-box | padding-box | content-box
- Initial: border-box
- Applies To: all elements
- Animatable: no
Values
- border-box
- The background is painted within (clipped to) the border box. It extends all the way to the outer edge of the border.
- padding-box
- The background is painted within (clipped to) the padding box. This means that no background is drawn below the border.
- content-box
- The background is painted within (clipped to) the content box.
Notes
Note that the background is always drawn behind the border, if any.
The root element (html) has a different background painting area, and thus the background-clip property has no effect when specified on it.
Examples
These are all valid background-clip declarations:
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
The following example draws the first background image all within the content box and the second background image within the border box;
.element {
background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
background-clip: content-box, border-box;
}
Live Demo
This is a live demo of the background-clip property:
Browser Support
CSS3 Background-image options
New properties to affect background images, including background-clip, background-origin and background-size
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 15
- 4
- 9
- 10
- 7
Mobile / Tablet
- 7.0
- 4.4
- all
- 131
- 132
