Re: Multiple Background Images

Lachlan Hunt <lachlan.hunt@iinet.net.au>:
>
> 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?

"Foo" is on the top *and* bottom, "bar" at the right and left. That's  
following the usual convention for shorthands ('padding', 'margin',  
'border' etc.).

>> Should the syntax be like that, or would something else be better?

Definitely something else. (But what?)

>>  body { background: url(foo), url(bar); }

That would mean "use "bar", if "foo" is unavailable or unsupported" in my  
book, similar to 'font-family'.

>> body { background: url(foo) | url(bar); }

That's a new syntax and thus unambiguous, except that '|' usually means OR  
or XOR. I guess '&' is disliked, because it had to be "escaped" if used  
embedded into one of some markup languages (just like '<').

>> body { background: url(foo) and url(bar); }

I'd prefer a one-char designator. Some ASCII characters are still unused.

> I think the syntax does require a delimiter between images,

ACK.

> Each image needs to be able to be individually repeated, attached and  
> positioned, so I think a syntax like this would be best.

Yes, but 'background-color' should be unique.

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

I assume, this should be equivalent to

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

Maybe an approach to some degree inspired by the ceasing '@font-face'  
could be an option:

   @background {
     name: foobar;
     /* Somehow there must be a rule and sub-rulesets inside this at-rule.  
*/
     ::entry(0) {background-image: url(foo); background-attachment: scroll;}
     ::entry(1) {background-image: url(bar); background-repeat: repeat-x;}
   }
   body {
     background: "foobar" fixed red; /* or "#foobar" or "url(#foobar)" */
   }

I'm not sure whether "foo" should be 'fixed' or not.
You can perhaps spare the 'background-' parts, i.e.

     ::entry(0) {image: url(foo); attachment: scroll;}

Font-facish would be "src: url(foo)".

Thinking about it, '::entry()' is almost like '::outside()', but limited  
to appear inside [a] certain at-rule[s].
I wrote about virtual copies of a box once ('::copy()', '::instance()' or  
'::box()'), but don't remember if that was on www-style. All copies would  
inherit all rules from their base '::copy(0)' and thus cannot be  
distinguished from that one, as long as there are no further rules. For  
some applications it's not much different from the '::outside()' proposal  
and could be used for multiple backgrounds as well, but it would also  
allow for example repetition of navigation from the start at the end of a  
page. I think, there were unresolved/unresolvable DOM issues, though.

Received on Monday, 1 November 2004 19:46:43 UTC