Re: [gradients] basics

On Wed, Nov 11, 2009 at 12:55 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> Well, perhaps. I had assumed that 'background-size:100% 100%' on the :root
> (or in HTML on the BODY or HTML elements) would size any background-image to
> fill the viewport (as with 'background-color'), but I just tested this (with
> an ordinary PNG image) and was surprised by the results. In recent Webkit
> and Firefox nightlies, it only sized it to the actual body height.
> If this is the right behavior for background-images, then a little magic
> could be warranted, I suppose. but if :root is already doing some magic for
> background-color, why not have it do the same sort of thing for 100% height
> background-images of all sorts on the :root? That seems like the most
> logical thing to me.

:root magic is all kinds of crazy.  I think that the current behavior
really is the best, though - when you want a background-image on it to
extend to the full height of the viewport, just open up your
stylesheet with a "html, body { height: 100%; }" rule.

> Heh. I was actually thinking of fantasai's 'background-size:50%' example.
> But I get your point. Yes I could add four more color stops to do that (for
> horizontal or vertical gradients). OR in fantasai's example just adjust the
> position of the existing outside color stops (and it works at any angle).
> Thus my example would need to be:
> background-image: linear-gradient(-90deg, transparent, transparent 16px, red
> 16px, yellow calc(100% - 32px), transparent calc(100% - 32px), transparent)
> ...instead of
> background-size: calc(100% - 32px);
> background-image: linear-gradient(-90deg, red, yellow)

You don't need to add 4 additional stops, just 2.

> In general, though, I don't think there's a correct solution to this.
> I know of several places where I'd want it to act like an infinite
> image,
>
> Can you name a couple, besides :root (where there be magic already)? I don't
> actually see the need for special magic on other elements just to replicate
> what can already be done with color-stops.

Sure.  The most important one is using background-position in the
expected manner.  If I start with "background-image:
radial-gradient(yellow, red);" and then apply "background-position:
100px 100px", I expect the gradient to shift a bit but still fill my
box.  Current FF and Safari behavior disagree, and there's *no way* to
reproduce what I want using additional color stops.  The chopping
happens while the image is being generated, and then this
(finite-size) image is positioned/scaled/etc.

On the other hand, if the image stayed effectively infinite, we could
then just throw image-rect() at it to chop it when we needed to.

> And it's clip region is not really infinite is it? I assume
> 'background-clip' still clips it (to the border-box, by default). Otherwise,
> every text span with a gradient background would fill the screen. That is
> clearly not desirable.

Yes, background-clip does clip, but at a later stage than what we're
worrying about.  Background-clip's clipping is great and I wouldn't
change it for the world.

~TJ

Received on Wednesday, 11 November 2009 22:17:50 UTC