CSS Property background-origin
The background-origin specifies where
the background color and image are applied.
Summary
| Item | Value |
|---|---|
| Initial value | padding-box |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.backgroundOrigin="content-box" |
CSS Syntax
background-origin: padding-box|border-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-origin |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use background-origin CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p { <!-- ww w. jav a2 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;
}
</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>