CSS3: background-origin and background-clip

Mozilla, Safari 3 and Konqueror have experimental implementations of the CSS3 properties background-origin and background-clip.

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, padding and content. When you supply a value of padding, the position is relative to the upper left corner of the padding edge. With border it’s relative to the upper left corner of the border, and content means the background is started from the upper left corner of the content.

background-clip

The background-clip property is used to determine whether the backgrounds extends into the border or not. The default is border, which means it DOES extend into it, but if you set it to padding, it doesn’t.

Here’s 2 times 3 examples, the first row with background-clip

set to border, in the second row it’s set to padding.

border

padding

content

border

padding

content

If you’re not seeing anything different in the blocks above, check out thi s screenshot.

Property names
The experimental implementations have the following property names:

• -webkit-background-origin / -moz-background-origin


• -webkit-background-clip / -moz-background-clip