Re: [gradients] basics

On Nov 10, 2009, at 7:14 PM, fantasai wrote:

> I'm also pondering having
>  background-size: 50%;
>  background-position: center;
>  background-repeat: no-repeat;
> allow the gradient continue outside the 50% box in the center instead of
> clipping. This parallels the behavior for :root, where the background
> positioning box is different from the background clipping box. I'm mainly
> suggesting this because I can't really see a use case for sharply clipping
> the gradient separately from the rest of the background. (So, to reuse
> the above diagram, the inner box would be the 50% rectangle, and the outer
> box would be the background painting area.)

Just to revive this topic a little. I kind of like the idea, actually, but not all the time. For instance, take a look at the following, which used PNGs to simulate what a linear-gradient could do:

http://www.bradclicks.com/cssplay/linear-gradient/chrome.html

The idea is that the top layer of the background is only covering the bottom half of the gradient below it. You can see this in a recent Webkit download, and it works, and I like it. The code is this:

html { height:100%; }
body { 
	height:100%; 
	padding:0; margin:0; 
	background-image:  url(edge-darkener.png), url(chrome.png); 
	background-size:100% 50%, 100% 100%; 
	background-repeat:no-repeat, no-repeat;
	background-position:0 bottom, 0 0; }

I was thinking that perhaps to get the "infinite outside" effect you bring up, then maybe there could be a new value, such as 'background-repeat: extend' that would not repeat the image, but would should its outside, clipped only by the background painting area.