CSS background-origin Property
Example
Let the background-image start from the upper left corner of the content:
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Try it Yourself »
border: 10px dashed 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 |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS Syntax
background-origin: padding-box|border-box|content-box|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| padding-box | Default value. The background image starts from the upper left corner of the padding edge | Demo ❯ |
| border-box | The background image starts from the upper left corner of the border | Demo ❯ |
| content-box | The background image starts from the upper left corner of the content | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
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 dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
Try it Yourself »
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
Related Pages
CSS tutorial: CSS Backgrounds
HTML DOM reference: backgroundOrigin property