CSS Reference Property

background-origin 3v4072

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. 55g3o

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.

Box areas of an element.

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 52n3v

Syntax:

background-origin: <box> [ , <box> ]*

/* where */

<box> = padding-box | border-box | content-box

Initial: padding-box
Applies To: all elements
Animatable: no

Values 6u6u2p

padding-box: The position is relative to the padding box. The origin of the image at 0 0 is 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 0 is 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 0 is positioned at the top left corner of the content box.

Examples 2w2wp

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 163835

And here is a live demo that shows some examples:

View this demo on the Codrops Playground

Browser 3n3564

CSS3 Background-image options 5u4637

New properties to affect background images, including background-clip, background-origin and background-size

W3C Candidate Recommendation

ed from the following versions:

Desktop 5i6y2c

Mobile / Tablet 53b3r

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 3m5t2q