RE: [css21] repeated background image extension into border area.

In case it's useful to others, here was what I replied earlier...


I’ve pieced together some of it by combining snippets of various specs.  In the below, “>” means above.

http://www.w3.org/TR/css3-background/#the-box-shadow

In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).

Conclusion:
{border / border-image} > {inset box-shadow} > {background-color / background-image} > {non-inset box-shadow}


http://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#layers

Conclusion:
{descendants/content} > {backgrounds & borders}


This looks like the definitive coverage for CSS2.1 though…
http://www.w3.org/TR/2009/CR-CSS2-20090908/zindex.html

{border} > {background-image} > {background-color}


Combining it all together (bottom up)…
1. [Non-inset box-shadow layers]
2. Background-color
3. Background-image [layers]
4. [Inset box-shadow layers]
5. Border
6. Descendants

The [bracketed] entries are new to CSS3.

Received on Wednesday, 17 August 2011 23:48:26 UTC