CSS3: background-origin and background-clip
Mozilla, Safari 3 and Konqueror have experimental implementations of the CSS3 properties
background-clip. Opera has a stable implementation–based on the latest public version of the Background and Borders specification–in Opera Presto 2.3 based browsers.
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,
content-box. When you supply a value of
padding-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
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.
If you’re not seeing anything different in the blocks above, check out this screenshot.
The experimental implementations have the following property names:
The stable implementations have the following property names: