HTML and CSS Reference
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+.
The painting area of a background image or color can be set with the background-clip
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 is supported in Chrome 1+, Firefox 4+, IE9+, Safari 3+,
and Opera 12+.
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:
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.