HTML and CSS Reference
In-Depth Information
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-ori-
gin
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.
