W3C home > Mailing lists > Public > www-style@w3.org > September 2011

Re: [cssN backgrounds] background-repeat: extend;

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 20 Sep 2011 16:03:24 -0700
Message-ID: <CAAWBYDBHyHkP_RBBf-99E9LaUshVDAMqWdORdsVFuyaBsuwMCQ@mail.gmail.com>
To: "L. David Baron" <dbaron@dbaron.org>
Cc: Brian Manthos <brianman@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
On Tue, Sep 20, 2011 at 3:55 PM, L. David Baron <dbaron@dbaron.org> wrote:
> I'm not sure if the two of you are at all discussing the same
> feature.
> I *think* what Brian is talking about is background-clip: no-clip,
> which was in older-drafts of css3-background.  (I'm happy it was
> removed.)
> I *think* what Tab is talking about is extending the image larger
> than its underlying size, which is sensible given the
> 'background-repeat: extend'.  This requires assuming that Tab's
> sentence:
>  # The effect of it is that it displays the entire image when an image
>  # overflows the concrete object size.
> in http://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html
> was actually the opposite of what he meant, and the proposal for
> background-repeat: extend (which I've never actually seen) is
> actually about extending the *image* when it doesn't fill the box.
> But I'm not sure about either statement.

No, neither of us are talking about background-clip:no-clip.  I
definitely meant what I said in that quote.  In the following example,
you never see any of the colors past yellow - the image is clipped at
that point into a rectangle (the concrete object size), and the rest
of the background canvas is filled with transparent:

div {
  background-image: radial-gradient(center, cover, red 0%, orange 50%,
yellow 100%, green 150%, blue 200%, purple 250%);
  background-size: 20% 20%;

If background-repeat:repeat is used, the rest of the background canvas
is filled with tiles of the clipped rectangle.  If
background-repeat:extend is used, the rest of the background is filled
with *the rest of the gradient* - it's not clipped to the concrete
object size (though that's still used for *generating* the gradient).
You'll be able to see all the colors all the way through purple.

Similarly, if an SVG image has parts that extend outside the bounds of
the viewport, these are normally clipped away in the same manner.
With 'extend', they'd be displayed.

Received on Tuesday, 20 September 2011 23:04:11 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:04 UTC