CSS background-clip

The background-clip property specifies the area within which background is displayed. A background may be displayed within the content box, the padding box or the border box.

CSS

background-clip: value;

background-clip property should be used along with background-originproperty, where the latter specifies the starting position of the background image, while the former specifies the area where the image is displayed.

Values

border-box : Background is displayed within the border box, i.e. it extends to the outer edge of the border. This means that the background will be visible beneath the border if the border is partially transparent. This is the default value.

padding-box : Background is displayed within the padding box.

content-box : Background is displayed within the content box.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Example

See the Pen background-clip examples by Aakhya Singh (@aakhya) on CodePen.

In all the three cases, the background image starts from the top left corner of the border box because the background-origin property is set to border-box. The area in which the background image appears depends on the value given to the background-clip property.

Look at another example.

See the Pen background-clip value for different background-origin values by Aakhya Singh (@aakhya) on CodePen.

This example is given just to show you the difference in the appearance of the background image on giving the value content-box to the background-clipproperty for different values of the background-origin property.

Giving different values for different background images

For giving different clipping values for different background images of an element, different comma-separated values have to be given to the background-clip property.

The first value (before the first comma) corresponds to the first background image, the second value to the second image, and this goes on for every image. If only one value set is specified, then it will define the clipping behaviour of all the background images.

HTML

<div></div>

CSS

div {
    width:200px;
    height: 110px;
    border: solid 22px rgba(15, 145, 56, 0.7);  /* border */
    padding: 20px;  /* padding */
    background-image: url('star.png'), url('leaves.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-clip: content-box, border-box;
    background-origin: border-box;
}

The first image 'star.png' appears within the content box and the sat econd image 'leaves.jpg' appears within the border box, though starting position of both the images is the top left corner of the border box.

See the Pen background-clip values for different background images by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.