background-clip
Description
The background-clip controls the area where the background color
and image are drawn in the element's box.
| Item | Value |
|---|---|
| Initial value | border-box |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.backgroundClip="content-box" |
Syntax and Property Values
background-clip: border-box|padding-box|content-box;
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. |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
p { <!--from www .ja va2 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>
The code above generates the following result.
