Re: [gradients] basics

Tab Atkins Jr. wrote:
> On Sun, Nov 8, 2009 at 9:17 PM, Robert O'Callahan <robert@ocallahan.org> wrote:
>> I'm confused. Why should background-size and background-repeat have no
>> effect on gradient images? Sure, the image has no intrinsic size, but you
>> can define a useful size with background-size.
> 
> I can certainly see a use for such, and now that I look back at the
> Surfin' Safari post, I see that they explicitly support it in the
> logical way (confirmed now that I've gotten my nightly working again).
>  The gradient trybuild of FF I have, though, doesn't appear to apply
> background-size to gradients.
> 
> (Fiddles with things…)
> 
> Okay, nightly of Firefox supports it the same as Webkit.
> 
> That's actually a little inconvenient.  The default radial gradient
> (with a <size> of 'cover'), for example, will produce an image that
> *always* overfills the box.  You can't get at that extra, though,
> because the image is chopped to the size of the box.  Playing with
> background-position shows that it just stops at the edge.
> 
> This complicates things a bit for me, as I was expecting to be able to
> use background-position to get around the need for manually specifying
> the aspect ratio of the ellipse - you could previously just move the
> starting point to wherever would produce the ratio you want, and then
> background-position it into the location you want.  Now it looks like
> I may have to add explicit ratio controls.  ;_;

I don't really understand what you're trying to do here. If you want
to fill the box and not necessarily keep the aspect ratio, you use
background-size: 100%. If you want to keep the aspect ratio, and clip
out the parts that don't fit inside the box, you use 'cover'. If you
want to keep the aspect ratio and size the image so that it /just/
fits the box, you use 'contain'.

Now I think gradients should behave a little special in how they clip.
They should have a size, but their clip rect should be infinite. So if
you specify a gradient on the root element, it is sized and positioned
as for the root element, but its paint continues beyond the box to fill
the canvas. Similarly a gradient with 'contain' should be sized to that
container, but its paint should continue to fill the entire background
painting area. I'd even say any background-size value would size the
gradient but not clip it unless the gradient were repeated in that
dimension.

~fantasai

Received on Tuesday, 10 November 2009 20:24:39 UTC