Multiple Background Images

This is in response to Hixies latest log entry, "Multiple Background Images"
http://ln.hixie.ch/?start=1098915335&count=1

> Given the following hypothetical CSS3:
> 
> body { background: url(foo) url(bar); }
> 
> Which background is painted on the bottom, and which is painted on the top?

I couldn't find any other property that would set a precedent for this 
decision, but I think it would be most logical if they were painted from 
top to bottom, in the order they appear.  ie. in the example, foo would 
be painted on top of bar.

> Should the syntax be like that, or would something else be better?
> 
> body { background: url(foo), url(bar); }
> body { background: url(foo) | url(bar); }
> body { background: url(foo) and url(bar); }

I think the syntax does require a delimiter between images, since 
'background' is already a shorthand property for background color, 
image, repeat, attachment and position.

[<'background-color'> || <'background-image'> || <'background-repeat'> 
|| <'background-attachment'> || <'background-position'>] | inherit

Each image needs to be able to be individually repeated, attached and 
positioned, so I think a syntax like this would be best.
(Although I've used | as the delimiter, I couldn't think of any reason 
to use that instead of a comma, it was just an arbitrary decision)

body { background: url(foo) top left no-repeat fixed |
                    url(bar) top right repeat-y scroll; }

Without the delimiter, I don't think it would be possible to accurately 
determine which repeat, attachment and position values apply to each 
image because those values can appear in any order.

I think the background-color also needs to be taken into consideration. 
   If one or more colours are added to the example, how would they fit 
into the stack with the images?

eg
body { background: red url(foo) top left no-repeat fixed |
                    green url(bar) top right repeat-y scroll; }

Would all the colours be painted under all the images.  ie.  So they 
would be stacked like this (from top to bottom).

image1: foo
image2: bar
color1: red
color2: green

Or would the images be kept together with the associated background color.

image1: foo
color1: red
image2: bar
color2: green

In this second version, "image2: bar" and "color2: green" would only be 
visible if color1 was either fully or semi-transparent.

-- 
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/    Rediscover the Web
http://SpreadFirefox.com/   Igniting the Web

Received on Thursday, 28 October 2004 00:52:40 UTC