Re: [css3-background] stacking order of border image

Håkon Wium Lie wrote:
> I'm playing with backgrounds and borders. Fun stuff!
> 
> In:
> 
>   http://dev.w3.org/csswg/css3-background/
> 
> we find:
> 
>   Note that the 'border-image' property can also define a background
>   image, which, if present, is painted on top of the background
>   created by the background properties.
> 
> Some comments:
> 
>  - first, I think the text about stacking order should be normative;
>    perhaps it should go here:
> 
>       http://dev.w3.org/csswg/css3-background/#border-image

Good catch. Fixed.

>  - however, I'm not sure if I like the described behavior, for several
>    reasons:
> 
>  1) it seems counter-intuitive that 'border-image' should override the
>     more purpose-built background properties

The border-image property was designed to handle decorative borders
as well as something like aqua buttons. In order for the middle part
to tile and stretch the same way as the sides of the border, they have
to be specified together.

>  2) at a more practical level, the described behavior will create more
>     manual work. Consider this image:
> 
>      http://people.opera.com/howcome/2009/tests/borders/picture.jpg
> 
>     I'd like to use the frame in the picture in other contexts. To do
>     so, however, I need to edit the picture to:
> 
>     -- remove the man inside and replace him with a transparent field
>     -- save it in a format that supports transparency (i.e., not jpg)
> 
>     Rather, I'd like to use the jpg image directly and just set a
>     background on the element to cover the man:
> 
>       div { 
>         background: black;
>         border-image: url(picture.jpg) 125 125 125 125 stretch stretch;
>       }
> 
> So, how about placing the background from the 'border-image' be at the
> bottom of the stack instead? Or, perhaps even simpler, just clip the
> middle part of the borders image (the one rectangle which is not used
> as a border)?

If it's really an issue, we can add an 'empty' keyword to trigger
omitting the center part of the image. Or change the behavior and
have 'fill' require filling the middle.

Do any web designers have an opinion on this?

> Also, there's a typo in this sentence:
> 
>   An inner box-shadow casts a shadow as if everything outside the
>   padding edge were opaque. The inner shadow is drawn inside the
>   padding edge only: it is not drawn in outside the padding box of the
>   element.
> 
> The word 'in' should be removed, I believe.

Fixed.

~fantasai

Received on Monday, 26 January 2009 19:53:49 UTC