W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: [gradients] basics

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 8 Dec 2009 15:28:51 -0600
Message-ID: <dd0fbad0912081328y23a7a526p45c4beb1c43ab83c@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: fantasai <fantasai.lists@inkedblade.net>, www-style <www-style@w3.org>
[Not quoting because I don't have particular points to respond to.]

All right, Brad, you're right.  And wrong.  ^_^  Your reasoning is
wrong - you're either thinking about something incorrectly, or
assuming something that isn't present in the drafts.  But your idea
(for background-repeat:extend) is the correct way to solve this issue,
plus a little bit of extra specification.  Let me explain.

When you say "background-size:100px 100px", you're operating on the
background-image directly, telling CSS to resize it before it puts it
on the canvas and does the other transforms like background-position
and such.  You're saying that you want to scale the image such that
there is 100px of distance between its left and right edges, and
between its top and bottom edges.  Here's the million-dollar question,
though: On a gradient, *where are the edges*?

Gradients don't have edges.  Unlike traditional images, or even images
without intrinsic dimensions, gradients are completely edge-less, just
like solid colors.  They go on forever.  Saying you want a gradient to
be 100px wide is simply an incoherent statement, according to the
current state of B&B and Images.

But that's no good; that means that even the default 'auto' value of
background-size is incoherent when your background is a gradient.  We
need to fix this.  This is where your idea comes in; saying that the
gradient *is* finite in size and has edges equal to the 'box' used
when generating them is the most natural way to deal with this.  This
is intuitive and makes gradients work nicely with all the background
properties.

Now we come to background-repeat.  You're correct that this is the
right place to make a gradient extend out of that box, because this
property actually transforms finite-size images *into* infinite-size
ones.  An image with background-repeat:repeat goes on forever in both
dimensions, and no longer has edges, just like gradients.  So adding
another value to this property, 'extend', which removes the visual
clipping from naturally-infinite images is good and proper.  Just like
a repeated background, the 'size' of the image is still the same as it
would be without the repeating.

So, this all sound sane?  I suspect it does, since I'm just explaining
back to you what you already suggested.  If so, then I'll change
Images to explain this, and B&B'll need the new value added to
background-repeat.  No other changes should be necessary.

~TJ
Received on Tuesday, 8 December 2009 21:29:24 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:47:12 GMT