RE: Multiple Background Images for a Single Element

Bert,

Thanks for your detailed reply.

One more question: In the CSS3 "working document", is there any limit to the
number of background images you can specify?

Specifically, I'm thinking of a circumstance where one would want to have 8
images "docked" to the perimeter (all sides and all corners) of an element,
and a 9th image that "tiles" (or repeats) in the center.

Is this also possible?

Respectfully,

Lonnie Lee Best

-----Original Message-----
From: Bert Bos [mailto:bert@w3.org] 
Sent: Thursday, October 27, 2005 4:45 AM
To: Lonnie Best
Cc: frederick.boland@nist.gov
Subject: Re: Multiple Background Images for a Single Element

Hello Lonnie,

On Tuesday 25 October 2005 18:44, Lonnie Best wrote:
> I recently made a proposal to allow multiple background images for a
> single markup element. I was informed that the CSS3 specification
> allows this.
>
> I've briefly viewed the CSS3 specification at:
>
> http://www.w3.org/TR/css3-background/
>
> Do the details of my proposal offer any additional flexibility to the
> CSS3 specification? For example, does the CSS3 allow you to "dock"
> multiple background images to any "corner OR side" inside a single
> markUp element AND control how "multiple background images" will
> overlap (when the markup element's size is smaller than the full size
> of the background images that are "docked" within it?)?

I think the CSS proposal can do everything you propose. Instead of 
separate properties for the corners and sides, it allows an arbitrary 
number of values on the background' property. E.g., your example

> .RoundOffCorners
>
> {
>
>             background-image-top-left: url("top-left-curve.jpg") 4;
>
>             background-image-top-right: url("top-right-curve.jpg") 2;
>
>             background-image-bottom-left:
> url("bottom-left-curve.jpg") 3;
>
>             background-image-bottom-right:
> url("bottom-right-curve.jpg") 1;
>
> }

could be written like this:

    .RoundOffCorners
    {
    	background: url("top-left-curve.jpg") top left no-repeat,
    	            url("bottom-left-curve.jpg") bottom left no-repeat,
    	            url("top-right-curve.jpg") top right no-repeat,
    	            url("bottom-right-curve.jpg") bottom right no-repeat;
    }

There are other ways to write this, but this is the shortest. There is 
no need for a z-index, because the images are implicitly ordered from 
front to back.

See the draft for more details and for additional ways to get rounded 
corners.

This is still a draft, but there is an experimental implementation in 
Safari. (You'll need a Mac and will have to download and compile the 
WebKit source code yourself, because it is not in the normal, stable 
version.)



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 28 October 2005 19:12:43 UTC