Background clip property (background-clip)

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:

<!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 ››

Background clip property (background-clip)

Syntax:

Values:

Example

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

Comments

About

Contact

Get Connected