W3C home > Mailing lists > Public > www-style@w3.org > December 2003

Re: CSS3 and Multiple Backgrounds

From: Chris Moschini <cmoschini@myrealbox.com>
Date: Wed, 17 Dec 2003 11:15:58 -0500
To: www-style@w3.org
Message-ID: <1071677758.667c1fc0cmoschini@myrealbox.com>

Lachlan Hunt wrote:
> Scott Romack wrote:
>> It would be very nice to be 
>> able to specify multiple backgrounds to elements.
>> One quick example being rounded corners on the <body>
>> ex.    top right, bottom right, bottom left, top left.
>
> See this section on border images.  I think this can handle what you 
> want to do.
> http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image

Although this does accomplish the rounded corners example, I can
certainly imagine situations where multiple backgrounds on one
element could be quite useful.

Take the now-classic CSS Zen Garden, using its standard style:
http://csszengarden.com/

Note that, at the top-left of the page is a lillipad image that does
occupy some of the space outside the content, but also some inside
the content. At the bottom-left is a blossom tree with the same
inside/outside characteristics.

In this case, the effect is only possible because there are 2 layers
to apply backgrounds to - the body tag and a second div tag occupying
the same area. If a design backing 4 corners was desired, 3 extra
tags would be needed. And if you wanted something in the center as
well... .

Ideally, this stacking of background images in a design that can be
any width or height could be handled in one CSS definition, instead
of modifying (and cluttering) the *ML for each layer of decoration.

-Chris "SoopahMan" Moschini
http://hiveminds.info/
http://soopahman.com/
Received on Wednesday, 17 December 2003 11:15:58 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:25 GMT