RE: [css3-background] 'background: url(foo) white' and 'background: url(foo), white'

This attempt at shorthand is invalid:
   background: white, url(foo);

The color component of a background shorthand value can only be present in the final layer.

-Brian


-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Boris Zbarsky
Sent: Friday, January 21, 2011 7:50 AM
To: tao.yu@nokia.com
Cc: www-style@w3.org; Art.Barstow@nokia.com
Subject: Re: [css3-background] 'background: url(foo) white' and 'background: url(foo), white'

On 1/21/11 10:39 AM, tao.yu@nokia.com wrote:
> I am not clear about the last statement in section 3.10 "The 'background' shorthand property", which says:
>
> Note that 'background: url(foo) white' and 'background: url(foo), white' have the same effect.

That's more or less an accident, actually.

The former shorthand specifies one background layer, with a white color 
and url(foo).  The image is painted above the color within a layer.

The latter shorthand specifies two layers, white color on the bottom 
layer and url(foo) on the top one.  This just happens to give the same 
result as having them both in the same layer.

But note that these two shorthands:

   background: white url(foo);
   background: white, url(foo);

do NOT paint the same.  The latter is just white, while the former 
paints the image on top of the white fill.

> Does that mean comma can be used between any of the individual properties and have the same effect as without it?

No.

-Boris

Received on Friday, 21 January 2011 19:11:19 UTC