Manuales 
background-origin 2b405n
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. 5h5n1l
The different values will result in different effects when combined with other background properties such as 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 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 55184y
- Syntax:
background-origin: <box> [ , <box> ]* /* where */ <box> = padding-box | border-box | content-box - Initial: padding-box
- Applies To: all elements
- Animatable: no
Values 584j31
- 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 3e5p5z
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 2x4j2k
And here is a live demo that shows some examples:
View this demo on the Codrops PlaygroundBrowser k5t66
CSS3 Background-image options 6s35g
New properties to affect background images, including background-clip, background-origin and background-size
W3C Candidate Recommendation
ed from the following versions:
Desktop 3n671n
- 15
- 4
- 9
- 10
- 7
Mobile / Tablet 4q224p
- 7.0
- 4.4
- all
- 66
- 60