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.
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:
* <del>webkit</del>background-origin / <del>moz</del>background-origin
* <del>webkit</del>background-clip / <del>moz</del>background-clip
CSS3: background-size
CSS3 gives you a way to specify the size of background images. You can specify this size in pixels, width and height, or in percentages. When you specify a size as a percentage, the size is relative to the width or height of the area that you have pointed out using background-origin.
The only browsers having this feature implemented so far are Safari 3 and Konqueror, they use webkitbackground-size and khtmlbackground-size.
CSS3: multiple backgrounds
CSS3 allows for multiple background images on one element. To do this, you can separate backgrounds by commas, like this:
background: url('http://www.joostdevalk.nl/images/body-top.gif')
top left no-repeat,
url(’http://www.joostdevalk.nl/images/banner_fresco.jpg’)
top 11px no-repeat,
url(’http://www.joostdevalk.nl/images/body-bottom.gif’)
bottom left no-repeat,
url(’http://www.joostdevalk.nl/images/body-middle.gif’)
left repeat-y;
Here’s an example of what this looks like. It allows, with the code above, for the same layout as this page with just 1 div.
The only browser project having this feature implemented so far is WebKit. This got into Safari 1.3 though, and works in OmniWeb 5.5.
