Re: Gradients and background-repeat (Was: Re: Automatic spec annotations)

On Wed, May 11, 2011 at 12:59 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On May 11, 2011, at 11:07 AM, Simon Fraser <smfr@me.com> wrote:
>> As I've said before, I think background-repeat should only ever affect axis-aligned, tiled backgrounds (i.e. repeating a rectangular image on an x-y grid). Because of this, it's not suitable for repeating gradients, which may be linear at an angle, or radial.
>
> Is it still axis aligned if the entire element is rotated via 'transform'? Assuming the answer is "yes", and that you don't want to disable background-repeat for that, then what is wrong with having 'background-rotate' (or 'background-transform')? The background still has a pair of axi to align to, and the 'auto' value on it would take care of moving the rotation from the individual tile and into the whole background. Then all the gradients ARE aligned to an axis.

So, if someone wanted to do the diagonal-stripes pattern, rather than this:

background-image: repeating-linear-gradient(30deg, silver 0px, silver
50px, gray 50px, gray 100px);

...they'd have to do this:

background-image: linear-gradient(30deg, silver 0px, silver 50px, gray
50px, gray 100px);
background-size: 100px 100px;
background-position: bottom left;
 /* above necessary to get exact same rendering,
  * may not be needed in all cases
  */
background-repeat: repeat;
background-rotate: auto;

...with the "auto" value for background-rotate changing how you
interpret background-image (the gradient is instead rendered at 0deg),
then rotating the whole background by 30deg after it's repeated?

That's a lot of magic, not to mention syntax.  And it relies on new
behavior being added to the 'background' property, which I oppose as
it is then not available to things like filters.

~TJ

Received on Wednesday, 11 May 2011 20:34:45 UTC