Multiple background images: brilliant! I and many others have wanted to do this for ages, and it would make a lot of current CSS techniques a lot simpler.
Suggestions: drop border images altogether!
The multiple background images spec is quite sophisticated already, and I’d much rather see a _single_, comprehensive mechanism for layering images in CSS than two incomplete ones. Of course, this is predicated on the expectation of being able to use multiple background images to *create* borders, for which we’d need to…
Expand the background-clip property, perhaps to allow rectangle specifications such as: @background-clip: rect(0%-12px, 0, 0, 100%)@ — to clip an image into a 12px border on the left-hand-side — that is to say, provide some way of referring to the edges of the borders and the edges of the content.
Expand the background-position property to allow easy positioning outside the image area, or relative to edges. The notation above might be a good approach, so one could specify coordinates as @x%±y@. For example: @100%+3px@ to position an image (if used for the x coordinate) 3px right of the element box, or @bottom -1em@ which would be 1em up from the bottom of the element box.
(This could cover your ‘sprite’ requirement too, as the ‘offset’ number shifts the image appropriately.)
To enhance borders using background images, we also need a way of saying @border-style: transparent@ — (which would be generally useful too). This isn’t the same as ‘none’; it’s a border which takes up space but isn’t actually rendered. Background images could then be layered into the empty space.
Lastly, cascading has to be defined more rigorously too. I presume that, after declaring 10 background images, that a single @background: url(new-bg.jpg)@ removes all of them and replaces them with a single background image.
However, my stylesheet may wish to update only image 2. Can I be allowed to write @background-image: , url(logo-image.png),,@ to replace image 2, but inherit images 1, 3 and 4?
Even better, could I write @background-2: url(logo-img.jpg) top left@… or @background-image[2]: url(thing.gif)@ ..?
(post 1/2)