Position the background image relative to the content box:
The background-origin property specifies what the background-position property should be relative to.
Note: If the background-attachment property for the background image is "fixed", this property has no effect.
Default value: | padding-box |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.backgroundOrigin="content-box" Try it |
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 |
Value | Description | Play it |
---|---|---|
padding-box | Default value. The background image is positioned relative to the padding box | Play it » |
border-box | The background image is positioned relative to the border box | Play it » |
content-box | The background image is positioned relative to the content box | Play it » |
initial | Sets this property to its default value. Read about initial | Play it » |
inherit | Inherits this property from its parent element. Read about inherit |
CSS3 tutorial: CSS3 Backgrounds
HTML DOM reference: backgroundOrigin property