W3C home > Mailing lists > Public > www-style@w3.org > January 1999

Re: 24. Gradient & stretched backgrounds

From: Ian Hickson <py8ieh@bath.ac.uk>
Date: Fri, 15 Jan 1999 11:42:40 +0000 (BST)
To: David Perrell <davidp@earthlink.net>
cc: www-style <www-style@w3.org>
Message-ID: <Pine.GSO.4.04.9901151125540.9979-100000@amos.bath.ac.uk>
On Thu, 14 Jan 1999, David Perrell wrote:
>> 'background-repeat'
>>    Value:       repeat | repeat-x | repeat-y |
>>                 no-repeat [INS:] | stretch [:INS] | inherit
>>    Initial:     repeat
>>    Applies to:  all elements
>>    Inherited:   no
>>    Percentages: N/A
>>    Media:       visual
>>
> How about two more: 'stretch-x' and 'stretch-y'?
> Stretch-x would size-to-fit in the x direction and repeat in the y,
> stretch-y would size-to-fit in the y and repeat in the x. This would
> allow textured gradients.
Good idea.

> 'Stretch' is not descriptive for all possibilities. The image might
> need to be shrunk to fit a smaller box, so it's more a 'fit' than a
> 'stretch'. Perhaps there is a better name for this value.
Yes - the word 'fit' matches the description better. 

> Authors would almost certainly not want the same background image
> for gradient as for non-gradient background. So... for backward
> compatibility an author would specify an element's background twice
> using the 'background' shorthand? With different URL and new
> attribute in the second declaration thus overriding the first if the
> UA understands the new value?
Yes. Because of CSS error handling rules, the following would do what
you descrtibe:

 BODY { background: silver url(tile.png) repeat; color: black; }
 BODY { background: silver url(gradient.png) fit; color: black; }

Because the second 'background' declaration contains a non-CSS1/CSS2
keyword 'fit', the whole declaration should be ignored, and thus the
first rule's 'background' declaration would be used.

i.e., in a CSS1 browser, the stylesheet is reduced to:

 BODY { background: silver url(tile.png) repeat; color: black; }
 BODY { color: black; }

In a CSS3 browser, the second rule would override the first because of
the cascade.

Anyway. The full description becomes:

---------------------------------------------------8<----------------------

 'background-repeat'
    Value:       repeat | repeat-x | repeat-y | no-repeat |
               [INS:] fit | fit-x | fit-y | [:INS] inherit
    Initial:     repeat                                 
    Applies to:  all elements
    Inherited:   no
    Percentages: N/A
    Media:       visual
  
If a background image is specified, this property specifies whether
the image is repeated (tiled), [INS:] scaled to fit (stretched) or
both, [:INS] and how. All tiling [INS:] and scaling [:INS] covers the
content and padding areas of a box. Values have the following
meanings:
  
  repeat
         The image is repeated both horizontally and vertically.
 
  repeat-x
         The image is repeated horizontally only.
         
  repeat-y
         The image is repeated vertically only.

[INS:]
  fit
         If 'background-attachement' has the value 'scroll', then the
         image is to be scaled (in both the x and y directions) so as
         to cover the entire content and padding area of the box. If
         'background-attachement' has the value 'fixed', then the
         image is to be scaled so as to cover the viewport. Note that
         even if the image is scaled to cover the viewport, it is
         still only visible where the background or padding area of
         the element visible on the viewport.

  fit-x
         Analogous to 'fit', but only scaled to fit in the x direction. 
         In the y-direction, the image is repeated, the height of each
         step being the intrinsic height of the image (as in 'repeat-y').

  fit-y
         Analogous to 'fit', but only scaled to fit in the y direction. 
         In the x-direction, the image is repeated, the width of each
         step being the intrinsic width of the image (as in 'repeat-x'). 
[:INS]
         
  no-repeat
          The image is not repeated [INS:] or scaled to fit [:INS]:
          only one copy of the image is drawn [INS:] (using its
          intrinsic dimensions) [:INS] .

---------------------------------------------------8<----------------------

-- 
Ian Hickson
Received on Friday, 15 January 1999 06:42:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:53:58 GMT