background-origin
Description
The background-origin specifies where
the background color and image are applied.
| Item | Value |
|---|---|
| Initial value | padding-box |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.backgroundOrigin="content-box" |
Syntax and Property Values
background-origin: padding-box|border-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 { <!-- w ww . ja va 2 s. co 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;
}
</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.
