Example
Let the background image start from the upper left corner of the content:
#example1 {
border: 10px double black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
More “Try it Yourself” examples below.
Definition and Usage
The background-origin property specifies the origin position (the background positioning area) of a background image.
Note: This property has no effect if background-attachment is “fixed”.
| Default value: | padding-box |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.backgroundOrigin=”content-box” Try it |
CSS Syntax
background-origin: padding-box|border-box|content-box|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| padding-box | Default value. The background image starts from the upper left corner of the padding edge | #myDIV { padding:25px; border:10px dotted #000000; background-image:url(‘paper.gif’); background-origin:padding-box; background-repeat:padding-box; } |
| border-box | The background image starts from the upper left corner of the border | #myDIV { padding:25px; border:10px dotted #000000; background-image:url(‘paper.gif’); background-origin:padding-box; background-repeat:border-box; } |
| content-box | The background image starts from the upper left corner of the content | #myDIV { padding:25px; border:10px dotted #000000; background-image:url(‘paper.gif’); background-origin:padding-box; background-repeat:content-box; } |
| initial | Sets this property to its default value. Read about initial | #myDIV { padding:25px; border:10px dotted #000000; background-image:url(‘paper.gif’); background-origin:padding-box; background-repeat:initial; } |
| inherit | Inherits this property from its parent element. Read about inherit |
Example
Set two background images for a <div> element. Let the “paper.gif” background image starts from the upper left corner of the padding edge, and let the “img_tree.gif” background image starts from the upper left corner of the content:
#example1 {
border: 10px double black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
