CSS background-clip property

Description

CSS background-clip property specifies the boundary of the background painting area.

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

border-boxDefault: In this case, the background of all of the areas within border-box is painted such as content area, padding area, and border area.; background-clip: border-box;
Try it
padding-box: In this case, the areas that are within padding-box are painted such as the padding and the content areas.; background-clip: padding-box;
Try it
content-box: The only background of content-area is painted i.e. excluding the other two areas.; background-clip: content-box;
Try it

It applies to all elements

Code

CSS

.parent{
width:150px;
height:150px;
background-image:url("img/background.jpg");
padding:10px;
border:10px dashed black;
}

HTML

<div class="parent">
<p>We are observing background-clip property for different values of the background-clip property.</p>
</div>