24. Gradient & stretched backgrounds

The NOTE-CSS-Potential document says:

> It is currently not possible to make a background image that is
> exactly as wide as the element it is behind. CSS allows it to be
> centered or tiled, but not resized. With the coming vector graphics
> formats (SVG <L>), it seems especially useful to be able to scale a
> background image.

Can I just say that that would be very easy to add to the spec.

I suggest extending "background-repeat"'s entry to the following
(basically, add the keyword "stretch" and define it):

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

 '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
  
If a background image is specified, this property specifies whether
the image is repeated (tiled), [INS:] or stretched [:INS], and how.
All tiling [INS:] and stretching [: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:]
  stretch
         If 'background-attachement' has the value 'scroll', then the
         image is to be stretched 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 stretched so
         as to cover the viewport. Note that even if the image is
         stretched to cover the viewport, it is still only visible
         where the background or padding area of the element is
         visible on the viewport.
[:INS]
         
  no-repeat
          The image is not repeated: only one copy of the image is
          drawn [INS:] (using its intrinsic dimensions) [:INS] .

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

> One particular example is a color gradient: a background that
> changes gradually in color between two points or sides. Rather than
> an external image in SVG, this might even be a primitive in CSS.

It would be easiest to *implement* if CSS only defined 'stretch' and then
authors used (very) small SVG graphics to use gradients. This would also
prevent the war over how far CSS should go with gradients.

-- 
Ian Hickson

Received on Wednesday, 13 January 1999 09:10:44 UTC