Manuales 
background-clip i5h4z
The background-clip property specifies the area within which the background is painted. 6jo6v
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 4j1l4a
- Syntax:
background-clip: border-box | padding-box | content-box
- Initial: border-box
- Applies To: all elements
- Animatable: no
Values 4w6m73
- 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 5i3os
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 3y6d6i
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 176n59
This is a live demo of the background-clip property:
Browser s162l
CSS3 Background-image options 4r5l63
New properties to affect background images, including background-clip, background-origin and background-size
W3C Candidate Recommendation
ed from the following versions:
Desktop 1i5h4c
- 15
- 4
- 9
- 10
- 7
Mobile / Tablet 1u2r2g
- 7.0
- 4.4
- all
- 66
- 60