CSS Background Clip

CSS background-clip Property

The CSS

background - clip property defines how far the background (color, image, or gradient) should extend within an element.

border - box
- The background extends behind the border. This is default padding - box
- The background extends to the inside edge of the border content - box

Example

Using the background - 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;
}

Example

Using the background - 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;
}

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)