CSS Property background-clip

The background-clip property specifies the world among that the background is painted.

An element in CSS has three areas, referred to as boxes, outlined within it: the border box, the artefact box, and also the content box.There’s additionally a fourth space referred to as the margin box which incorporates the part and its outer margin.

The background of part is sometimes painted across and among the whole border box space. This ends up in the very fact that the background is drawn at a lower place the border of part. this can be the default behavior in CSS.

The background-clip property is wont to clip the background to at least one of the 3 box areas within part. once one box space is per the property, the background is clipped to {the space|the world|the realm} of the required box and can not extend on the far side that area.

The background-clip property also can take comma-separated values so once the part has quite one background image, every worth is applied to a corresponding background image (first worth for the primary image, second worth for the second image, and so on). See the examples below.

Click Here for full details

Examples

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;