Re: [css3-images] Simplifying radial gradients

On Tue, Sep 20, 2011 at 5:04 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Sep 20, 2011, at 10:34 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>> On Mon, Sep 19, 2011 at 6:24 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>> Another downside is performance-related.  To position a gradient in
>>> the upper-left corner, for example, you'd have to do:
>>>
>>> background-image: radial-gradient(white, black);
>>> background-size: 200%;
>>> background-position: 100% 100%;
>>
>> This is actually more of a downside than just performance.  Look at
>> that background-position.  To put the center of the gradient in the
>> top-left corner, I have to position the image in the bottom right.
>> That's pretty unintuitive.
>
> No, just position the left and top to -50%.  Since the center is 50% of the width and height, and you want it to be in the top left, it seems pretty intuitive to move the image up and to the left by half the image width in order to get it there.

Do the math.  That doesn't work.  Remember that you're aligning the
-50% point on the image with the -50% point on the element.  Since the
image is larger, its -50% point is further away from its edge, and so
the image is actually positioned a *positive* distance from the
element's left edge.  Images that are larger than the background
positioning area make background-position work in an unintuitive
"reversed" manner.

~TJ

Received on Wednesday, 21 September 2011 14:55:01 UTC