- 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>
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 UTC