The background-clip property is used to determine where and if background images are clipped inside the background area. The background-clip property also allows us to specify whether the background extends into the border or not.

Syntax:

selector {

      background-clip : border-box;

}

Values:

The background-clip property may take one of following values:

  • border-box - It is a default value position. The background is clipped relative to the border box.
  • padding-box - The background is clipped relative to the padding box.
  • content-box - The background is clipped relative to the content box.
  • initial or inherit

Example

Example with background-clip property set to the padding-box, border-box and content-box:

​x
 
<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:70%; height:82px; margin-top:5px;
    background:url(../../../img/tutorials/css3-background-origin.png) no-repeat center right #4a4;
    color: #e2e2e2; border: 4px solid #444;
  }
#padding-box {
    padding: 0 20 px;
    background-clip : padding-box;
}
​
#border-box  {
    padding:0 20px;
    background-clip: border-box;
}
​
#content-box {
    padding: 0 20px;
    background-clip: content-box;
}
​
</style></head>
​
<body>
​
<div id="padding-box"><strong>padding-box</strong></div>
<div id="border-box"><strong>border-box</strong></div>
<div id="content-box"><strong>content-box</strong></div>
​
</body>
</html>

 

›› go to examples ››