CSS3

CSS3: background-origin and background-clip

Mozilla, Safari 3 and Konqueror have experimental implementations of the CSS3 properties background-origin and 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

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 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 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.

If 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-origin
• background-clip