CSS3 background-originProperty
Example
Background image positioned relative to the content box
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports this property.
| Property | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Tag definition and usage instructions
The background-origin property specifies that the background-position property should be relative.
NoteIf the background-image background-attachment is "fixed", this property has no effect.
| Default Value: | padding-box |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object object.style.backgroundOrigin="content-box" |
Syntax
background-origin: padding-box|border-box|content-box;
| Value | Description |
|---|---|
| padding-box | Relative position of the background image to the padding box |
| border-box | Relative position of the background image to the border box |
| content-box | Content box of the background image's relative position |
Related Articles
CSS3 Tutorial:CSS3 Backgrounds
other extensions