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:12:27 UTC