background-origin
The background-origin property is used to determine how the background-position of a background in a certain box is calculated.
It takes three different values, border-box, padding-box and content-box. When you supply a value ofpadding-box, the position is relative to the upper left corner of the padding edge. With border-box it’s relative to the upper left corner of the border, and content-box means the background is started from the upper left corner of the content. Gecko and WebKit based browsers use an outdated version of the spec, with the values border, padding and content.
background-clip
The background-clip property is used to determine whether the backgrounds extends into the border or not. The default is border-box, which means it DOES extend into it, but if you set it to padding-box, it doesn’t. if you use content-box the background only extends to the content area. This value has been removed from the latest development version of the spec.
Here’s 2 times 3 examples, the first row with background-clip set to border-box, in the second row it’s set to padding-box. The Mozilla and WebKit version use their respective syntax.
border-boxpadding-boxcontent-boxborder-boxpadding-boxcontent-boxIf you’re not seeing anything different in the blocks above, check out this screenshot.
Property names
The experimental implementations have the following property names:
-webkit-background-origin/-moz-background-origin-webkit-background-clip/-moz-background-clip
The stable implementations have the following property names:
background-originbackground-clip
출처:http://www.css3.info/preview/background-origin-and-background-clip/