CSS background-clip property specifies how far an element’s background color or image should extend within the element.
The background color/image can extend up to its content-box or border-box or padding-box. See the example below:
Example:
div{
background: lightgreen;
background-clip: content-box;
border: 10px dashed red;
height: 100px;
padding: 20px;
}
Similar to the background color, you can apply the background-clip property to the background image also. See the example below:
Example:
div{
background-image: url('images/sand.jpg');
background-clip: content-box;
border: 10px dashed red;
padding: 20px;
}
CSS Syntax
The background-clip property has the following syntax:
background-clip: border-box|padding-box|content-box|initial|inherit;
Property Values
The background-clip property accepts the following values:
| border-box | The background color/image extends to the outside edge of the element’s border. This is the default value. |
| padding-box | The background color/image extends to the inside edge of the element’s border. |
| content-box | The background color/image extends to the boundary of the element’s content area. |
| initial | Sets the background-clip property to its default value(border-box). |
| inherit | Inherits the background-clip property from the parent element. |
General Info
| Default Value | border-box |
| Inherited | No |
| JavaScript Usage | element.style.backgroundClip = “content-box” |
Related Pages
CSS Tutorial: CSS Background
