CSS Property background-clip
The background-clip controls the area where the background color
and image are drawn in the element's box.
Summary
| Item | Value |
|---|---|
| Initial value | border-box |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.backgroundClip="content-box" |
CSS Syntax
background-clip: border-box|padding-box|content-box;
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| border-box | The background color and image are drawn within the border box. |
| padding-box | The background color and image are drawn within the padding box. |
| content-box | The background color and image are drawn within the content box. |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
background-clip |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use background-clip CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p { <!-- w w w. j ava2 s. c o m-->
border: 10px double black;
background-image: url(http://java2s.com/style/download.png);
background-size: 40px 40px;
background-repeat: repeat;
background-origin: border-box;
background-clip: content-box;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>