O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

background-origin

Values:

<bg-box> [ , <bg-box> ]*

Expansions:

<bg-box>

border-box | padding-box | content-box

Initial value:

padding-box

Applies to:

All elements

Inherited:

No

Computed value:

Same as declared value

Description:

Defines the boundary within the element box against which background-image positioning is calculated. Historically, this has been equivalent to the default value of padding-box. This property allows for different positioning contexts. Note that if the value of background-origin is “further out” than the value for background-clip, and the image is positioned to an edge, part of it may be clipped. For example:

div#example {background-origin: border-box; 
   background-clip: content-box; 
   background-position: 100% 100%;}

In this case the image will be placed so that its bottom-right corner aligns with the bottom-right corner of the outer border edge, but the only parts of it that will be visible are those that fall within the content area.

Examples:

html, body {background-origin: border-box;}
h1 {background-origin: content-box, padding-box;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required