CSS3 background-origin Property
Example
Let the background image start from the upper left corner of the content:
#example1
{
background:url(img_flwr.gif);
background-repeat: no-repeat;
padding:35px;
background-origin: content-box;
}
Try it Yourself »
Definition and Usage
The background-origin property specifies where the background image is positioned.
Note: If the background-attachment property is set to "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 |
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 | Play it |
---|---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge | Play it » |
border-box | The background image starts from the upper left corner of the border | Play it » |
content-box | The background image starts from the upper left corner of the content | 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 |
Related Pages
CSS3 tutorial: CSS3 Backgrounds
HTML DOM reference: backgroundOrigin property