From 508b7af77e97230d687e7a10cff617edcb8ebe93 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 27 Dec 2023 23:41:17 +0100 Subject: [PATCH] [css-backgrounds-4] Added background-repeat-* longhands --- css-backgrounds-4/Overview.bs | 168 +++++++++++++++++++++++++++++++++- 1 file changed, 166 insertions(+), 2 deletions(-) diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs index e1434cde42a..a4eedb5a5d1 100644 --- a/css-backgrounds-4/Overview.bs +++ b/css-backgrounds-4/Overview.bs @@ -37,6 +37,171 @@ Introduction

Backgrounds

+

+Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-repeat-block', and 'background-repeat-inline' properties

+ + 
+		Name: background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline
+		Value: <>#
+		Initial: repeat
+		Inherited: no
+		Percentages: N/A
+		Computed value: as specified
+		Animation type: discrete
+
+ + 
+		<> = repeat | space | round | no-repeat
+
+ +

These properties specify whether and how background images are tiled + along one axis after they have been + sized and positioned. + +

+
repeat +
+ The image is repeated in the given direction as often as needed + to cover the [=background painting area=]. + +
space +
+ The image is repeated in the given direction as often as will fit + within the [=background positioning area=] without being + clipped and then the repeated images are spaced out to fill the area. + The first and last images touch the edges of the area. + If the [=background painting area=] is larger than the background positioning area, + then the pattern repeats to fill the background painting area. + The value of 'background-position' for this direction is ignored, + unless there is not enough space for two copies of the image in this direction, + in which case only one image is placed and + 'background-position' determines its position in this direction. + +
round +
+ The image is repeated in the given direction as often as will fit + within the [=background positioning area=]. + If it doesn't fit a whole number of times, + it is rescaled so that it does. + See the formula under 'background-size'. + If the [=background painting area=] is larger than the background positioning area, + then the pattern repeats to fill the background painting area. + +
no-repeat +
+ The image is placed once and not repeated in the given direction. +
+ +

Unless one of the axes is set to ''no-repeat'', the + whole background painting area will be tiled, i.e., not just one + vertical strip and one horizontal strip. + +

+

Example(s): + 

+			body {
+				background: white url("pendant.png");
+				background-repeat-y: repeat;
+				background-position: center;
+			}
+
+ +
+

A centered background image, with + copies repeated up and down the border, padding and content + areas. + +

The effect of ''repeat'': One copy + of the background image is centered, and other copies are put above + and below it to make a vertical band behind the element. +

+
+ +

See the section “Layering multiple background + images” for how + 'background-repeat-x', + 'background-repeat-y', + 'background-repeat-block', + and 'background-repeat-inline' + interact with other comma-separated background properties + to form each background image layer. + +

+Tiling Images Shorthand: the 'background-repeat' property

+ + 
+	Name: background-repeat
+	Value: <>#
+	Initial: repeat
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: list, each item a pair of keywords, one per dimension
+	Animation type: discrete
+
+ +

This shorthand sets the values for the + 'background-repeat-x' and 'background-repeat-y' longhand properties. + Where + 

<> = repeat-x | repeat-y | <>{1,2}
+ +

Single values for <> have the following + meanings: + +

+
repeat-x +
+ Computes to ''repeat no-repeat''. + +
repeat-y +
+ Computes to ''no-repeat repeat''. + +
''background-repeat-x/repeat'' +
+ Computes to ''repeat repeat''. + +
''background-repeat-x/space'' +
+ Computes to ''space space'' + +
''background-repeat-x/round'' +
+ Computes to ''round round'' + +
''background-repeat-x/no-repeat'' +
+ Computes to ''no-repeat no-repeat'' +
+ +

If a <> value has two keywords, the first + one is for the horizontal direction, the second for the vertical one. + +

+

Example(s): + 

+	body {
+	background-image: url(dot.png) white;
+	background-repeat: space
+	}
+
+ +
+

Image of an element with a dotted background + +

The effect of ''background-repeat/space'': the image of a dot is + tiled to cover the whole background and the images are equally + spaced. +

+
+ +

See the section “Layering multiple background + images” for how 'background-repeat' interacts with other + comma-separated background properties to form each background image + layer. + + Issue: Should a 'background-repeat: extend' be added? +

Background Positioning: the 'background-position' shorthand property

@@ -242,8 +407,6 @@ Background Image Layers: the 'background-tbd' shorthand property -Issue: Should a 'background-repeat: extend' be added? -

Changes

@@ -254,6 +417,7 @@ Additions since [[CSS3BG]] * added logical keywords to <> * added 'background-clip' * added 'background-tbd' + * added 'background-repeat-*' longhands

Acknowledgments