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