Manuales 
background-clip 40123s
The background-clip property specifies the area within which the background is painted. 5o2l5k
An element in CSS has 3 areas, called boxes, defined inside it: 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 3xs5l
- Syntax:
background-clip: border-box | padding-box | content-box
- Initial: border-box
- Applies To: all elements
- Animatable: no
Values u704t
- 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 441w3q
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 2h2053
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 6b4m17
This is a live demo of the background-clip property:
Browser 572e63
CSS3 Background-image options 554jj
New properties to affect background images, including background-clip, background-origin and background-size
W3C Candidate Recommendation
ed from the following versions:
Desktop ea5q
- 15
- 4
- 9
- 10
- 7
Mobile / Tablet 6s2f12
- 7.0
- 4.4
- all
- 66
- 60