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 | 12.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
