CSSBackground Clip
CSS background-clip Property
The CSSbackground-clip property defines how far the background (color, image, or gradient) should extend within an element.
This property can have one of the following values:
border-box- The background extends behind the border. This is defaultpadding-box- The background extends to the inside edge of the bordercontent-box- The background extends to the edge of the content box
Example
Using thebackground-clip property with a background image:
#div1 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: content-box;
}
Try it Yourself »border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: content-box;
}
Example
Using thebackground-clip property with a background color:
#div1 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
Try it Yourself »border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
CSS Advanced Background Properties
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |
