CSS Reference Property

background-origin

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.

box-areas
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

  • 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 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

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 Playground

Browser 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
  • 62
  • 57

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 9:50 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.