W3C home > Mailing lists > Public > www-style@w3.org > March 2010

Re: Background-repeat:extend (for gradients)

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 18 Mar 2010 08:15:44 -0700
Cc: Tab Atkins Jr. <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <EBFAE780-8426-467A-B266-27C8AEC72B17@gmail.com>
To: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>

On Mar 17, 2010, at 5:26 PM, Philippe Wittenbergh wrote:

>> Firefox 3.6 renders the gradient as a 200px by 200px image, and then
>> moves it 100px over, leaving an area not covered by a background image
>> and revealing the background-color underneath.
> FWIW, Gecko trunk (1.9.3a4pre) has a different behaviour here, one that matches what WebKit does:
> The 'image' is offset by 100px to the right, but repeated. The background-color is not visible.
> testcase
> http://dev.l-c-n.com/CSS3_border-background/background-repeat-gradient.html

It should be repeated in that test case, because the initial value used by that shorthand is 'background-repeat:repeat'. It should only _not_ be repeated at all if there is 'background-repeat:no-repeat' (or 'background-repeat:extend').

'repeat', 'repeat-x', and 'repeat-y' are still useful for gradient backgrounds (especially for horizontal or vertical linear gradients, as is). 

In fact, since backgrounds are the place where repeating the gradient is more useful, I would prefer to remove repeating-linear-gradient() and repeating-radial-gradient() from CSS Images and just have repeating handled by 'background-repeat', with some special behavior to deal with the repeat not always being horizontal or vertical. 

Instead, we can simply say that for 'background-repeat:repeat-y' that the gradient repeats in the direction of the gradient path, and for 'background-repeat:repeat-x' that the gradient repeats in a direction perpendicular to the gradient path (for radial gradients, it would repeat radially for any of these three values).

For border-image, I don't see the non-infinite repeatability of non-horizontal and non-vertical gradients to be an issue of great concern, and for list-style-image it is no concern at all.

Having background-image-repeat work this way would simplify CSS Images, and avoid redundant ways to do the same thing: repeating a sized gradient using background-repeat, as one would normally expect to work (at least with horizontal and vertical it would look good and be very useful), or by using a special version of the image functions. As the CSS Design Principles state:

"The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect."


Received on Thursday, 18 March 2010 15:16:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:32 UTC