Re: 24. Gradient & stretched backgrounds

A while back, Rasmus Kaj and I suggested an idea for stretching
backgrounds, based on item 24 in the list of suggested changes to CSS
written by the WG.

Sjoerd Visscher then privately suggested to me that instead of using
"fit-x" and "fit-y", one could instead simply state the size of the
background image. At the time I considered that the added complexity
would not be worth the added functionality involved, but after
thinking about it for a while, I have changed my mind.

What follows is Sjoerd's suggestion, in a more formal style.

This suggestion returns the definition of 'background-repeat' to that
given by CSS2, and adds one new property: 'background-size'.

----------------------------------------------------------------8<---------
'background-size'
     Value:         [ auto | <percentage> | <length> ]{1,2} | inherit
     Initial:       auto auto
     Applies to:    all elements
     Inherited:     no
     Percentages:   see prose
     Media:         visual

If a background image has been specified, this property specifies its
size. The keyword 'auto' means that the size should be taken from the
image. If the image has no inherent size, then UAs may treat this
value as 100%.

Percentage sizes are relative to the distance between the left padding
edge and the right padding edge, unless the background-attachment
property has the value 'fixed', in which case percentage values are
relative to the viewport.

If only one value is given, it sets both the horizontal and vertical
sizes. If two values are given, the width comes first. Combinations of
length and percentage values are allowed, (e.g., '50% 2cm'). Negative
sizes are not allowed.

    Note. This property cannot be set by the 'background' shorthand
    property.

    Note. During incremental rendering, if the final vertical size of
    the element is not yet known (i.e., the value of the 'height'
    property is 'auto'), and the height of the background-image is
    expressed as a percentage, then UAs may treat the background
    height as 'auto' or a UA-defined value. This will prevent the need
    for stretch calculations to be repeatedly performed.


Examples:

The following rule stretches the purple-gradient.svg image across the
viewport.

BODY {
  background-color: purple;
  background-image: url("purple-gradient.svg");
  background-attachment: fixed;
  background-size: 100% 100%;
}

The following rule ensures that the logo graphic has a height of 2cm
and a width of 3cm, and that it is positioned at the top right of
every page.

@media print {

   BODY {
     background-color: white;
     background-image: url("logo.png");
     background-attachment: fixed;
     background-size: 3cm 2cm;
     background-position: top right;
   }

}

This final example causes four copies of circle.svg to be tiled as the
background of each TARGET element.

TARGET {
  background-color: purple;
  background-image: url("purple-gradient.svg");
  background-attachment: fixed;
  background-size: 50% 50%;
}

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

OPEN ISSUES:

Like for background-position, which is currently limited to block
level elements, I would suggest that this new property apply to all
elements, whether block or inline.

The following posts are relevant to this topic:

 http://lists.w3.org/Archives/Public/www-style/1998Sep/0004.html
 http://lists.w3.org/Archives/Public/www-style/1998Sep/0007.html
 http://lists.w3.org/Archives/Public/www-style/1998Sep/0009.html

-- 
Ian Hickson

Received on Wednesday, 17 February 1999 12:51:14 UTC