Re: Background Properties to CSS3

Actually you are already able to do all of this, including limited repeating
and multiple backgrounds with opacity and z-index!

Just use an SVG as background image.

/ Jonas Sicking

----- Original Message -----
From: "Andy" <lordpixel@mac.com>
To: "www-style" <www-style@w3.org>
Sent: Tuesday, October 09, 2001 15:12
Subject: Re: Background Properties to CSS3


> Rowland Shaw wrote:
>
> >
> > > One example might be if you want to fade between 2 colours as the
> > > background of the page. On can of course, achieve this with tables or
by
> > > introducing extra fixed/absolute <div> elements in the page structure.
> >
> > or just using background-repeat?
>
>
> No, because backround-repeat covers the whole area of an element - you
> don't then see the background colour anywhere.
>
> Consider the following example
>
> body {
> background-position: center center;
> background-repeat: repeat;
> background-quantity: 2;
> background-color: red;
> }
>
> If the background image is 100x100 this would look very different
> without the "quantity" if the window size if 800x800. You'd not be able
> to see the red.
>
> I'm not sold on this quantity stuff either, but I can see how it allows
> one to do things one presently can't without introducing extra markup.
>
> >
> > > I'd like to extend background-repeat to have more horizontal and
> > > vertical control. Currently repeat, repeat-x and repeat-y play two
> > > roles: repeat makes the background image tile, and one can make an
image
> > > repeat only horizontally or only vertically but *not* both
horizontally
> > > and vertically without tiling.
> >
> > My brain is getting twisted in knots here -- what is your distinction
> > between "repeating on both the x and y axis" and "tiling"? -- personally
I'd
> > define the latter as being the former.
>
> Well, I'd have hoped my diagram would have helped, but here's some more
>
>
> What we presently can do today
>
> p { background-image: url(foo.gif);
> background-position: top left;
> background-repeat: repeat;
> background-color: red;
> }
>
> ------------------|
> |*================| Here foo.gif '*' is tiled to
> |=================| so as to cover all of the <p>.
> |=================| No red is visible. '=' is a tiled
> |=================| copy of '*'
> |=================|
> |=================|
> ------------------|
>
> p { background-image: url(foo.gif);
> background-position: bottom right;
> background-repeat: repeat-x repeat-y;
> background-color: red;
> }
>
> ------------------|
> |red red red red =| Here foo.gif '*' is repeated in 2 directions
> |red red red red =| but the rest of the background of the p remains
> |red red red red =| visible and red.
> |red red red red =|
> |red red red red =|
> |================*|
> ------------------|
>
>
> p { background-image: url(foo.gif);
> background-position: center center
> background-repeat: repeat-x repeat-y;
> background-color: red;
> }
>
> ------------------|
> |red red=red red r| As above, but in the center.
> |red red=red red r|
> |=======*=========|
> |red red=red red r|
> |red red=red red r|
> |red red=red red r|
> ------------------|
>
>
> > > Why would this be useful? It would let you do edge effects on boxes
> >
> > Maybe some more random attributes would be better suited, to enhance the
> > current "border" properties (like allowing image data to be used, or
even
> > transparency filters etc); so maybe a border-image (and a
> > border-image-north, border-image-northeast, border-image-east, etc)
>
> Right. That's what I said at the end of my last mail. The 3rd example
> above might be useful, but I'm not sure it would come up often enough to
> warrant inclusion. Probably the 2nd example is the most common effect
> people would like, and it would be better implemented with a set of
> border-image-XXX properties as you mention.
>
> Extending border is probably better we want to commit to allowing
> multiple background images in one box, at which point you'd need to be
> able to set their z-index and opacity too, to allow compositing effects.
> (boy, I'm sure that'll make for some * S L O W * pages).
>
> --
> AndyT (lordpixel)
>

Received on Tuesday, 9 October 2001 09:35:21 UTC