The background-origin property specifies what is called the background positioning area. That is, it specifies where the origin of the background image (its upper left corner) will be when the background is painted.
The different values will result in different effects when combined with other background properties such as background-repeat and background-clip.
If the background-attachment value is set to fixed, the value of the background-origin property is ignored.
An element in CSS has 3 areas, called boxes, defined inside it: the border box, the padding box, and the content box.
There’s also a fourth area called the margin box which includes the element and its outer margin.
The background image origin of an element is usually the top left corner of the padding box.
The background-origin property can also take comma-separated values so that when the element has more than one background image, each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on).
Official Syntax
-
Syntax:
background-origin: <box> [ , <box> ]* /* where */ <box> = padding-box | border-box | content-box - Initial: padding-box
- Applies To: all elements
- Animatable: no
Values
- padding-box
-
The position is relative to the padding box. The origin of the image at
0 0is positioned at the top left corner of the padding box. - border-box
-
The position is relative to the border box. The origin of the image at
0 0is positioned at the top left corner of the outer edge of border box. - content-box
-
The position is relative to the content box. The origin of the image at
0 0is positioned at the top left corner of the content box.
Examples
These are all valid background-origin declarations:
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
The following example sets two different background origins for two background images applied to an element.
.element {
background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
background-origin: content-box, border-box;
}
Live Demo
And here is a live demo that shows some examples:
View this demo on the Codrops PlaygroundBrowser Support
CSS3 Background-image options
New properties to affect background images, including background-clip, background-origin and background-size
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 15
- 4
- 9
- 10
- 7
Mobile / Tablet
- 7.0
- 4.4
- all
- 130
- 130
