HTML and CSS Reference
In-Depth Information
This property was added in CSS 3 and is supported in Chrome 4+, Firefox 4+, IE9+,
Safari 5+, and Opera 10.5+. Use of the
-webkit
and
-moz
prefixes expand support to
Chrome 1+, Safari 3+, and Firefox 3.6+.
background-clip
The painting area of a background image or color can be set with the
background-clip
property.
background-clip : border-box | padding-box | content-box
The background normally extends to the outside edge of the border (
border-box
)
and renders behind any visible border. A value of
padding-box
instead draws the
background within the element's padding. The third possible value,
content-box
, draws
the background within the content area. Using the following declaration, the background
is clipped to the outside edge of the content:
background-clip: content-box;
background-clip
is supported in Chrome 1+, Firefox 4+, IE9+, Safari 3+,
and Opera 12+.
background-origin
The
background-origin
property determines the starting point of a background
image or color.
background-origin : padding-box | border-box | content-box
A background image is ordinarily rendered starting from the top left of the element's
padding area (
padding-box
). It can be changed so that the background either starts at the
top-left edge of the border area (
border-box
) or the content area (
content-box
).
The
background-origin
property is often used together with
background-clip
to change both the starting point and clipping area of the background. The following
declarations set both of them to the content area:
background-origin: content-box;
background-clip: content-box;
The
background-origin
property is a CSS 3 property that works in Chrome 4+,
Firefox 4+, IE9+, Opera 10.5+, and Safari 5+. All versions of Firefox and Chrome, along
with Safari 4, are supported with the
-moz
and
-webkit
prefixes, as seen in the next
example. Note that Firefox used the values
padding
and
border
prior to version 4; there
were no values for specifying the content box as the origin.