Skip to content

Commit c7d8a54

Browse files
SebastianZSebastianZ
committed
[css-backgrounds-4] Added background-repeat-* longhands
1 parent 6eb6f42 commit c7d8a54

File tree

1 file changed

+165
-2
lines changed

1 file changed

+165
-2
lines changed

‎css-backgrounds-4/Overview.bs‎

Lines changed: 165 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,171 @@ Introduction</h2>
3737
<h2 id="backgrounds">
3838
Backgrounds</h2>
3939

40+
<h3 id="background-repeat-longhands">
41+
Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-repeat-block', and 'background-repeat-inline' properties</h3>
42+
43+
<pre class="propdef">
44+
Name: background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline
45+
Value: <<repetition>>#
46+
Initial: repeat
47+
Inherited: no
48+
Percentages: N/A
49+
Computed value: as specified
50+
Animation type: discrete
51+
</pre>
52+
53+
<pre class="prod">
54+
<dfn><<repetition>></dfn> = repeat | space | round | no-repeat
55+
</pre>
56+
57+
<p>These properties specify whether and how background images are tiled
58+
along one axis after they have been
59+
<a href="https://www.w3.org/TR/css-backgrounds-3/#the-background-size">sized</a> and <a href="https://www.w3.org/TR/css-backgrounds-3/#the-background-position">positioned</a>.
60+
61+
<dl dfn-type=value dfn-for="background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline">
62+
<dt><dfn>repeat</dfn>
63+
<dd>
64+
The image is repeated in the given direction as often as needed
65+
to cover the [=background painting area=].
66+
67+
<dt><dfn>space</dfn>
68+
<dd>
69+
The image is repeated in the given direction as often as will fit
70+
within the [=background positioning area=] without being
71+
clipped and then the repeated images are spaced out to fill the area.
72+
The first and last images touch the edges of the area.
73+
If the [=background painting area=] is larger than the background positioning area,
74+
then the pattern repeats to fill the background painting area.
75+
The value of 'background-position' for this direction is ignored,
76+
unless there is not enough space for two copies of the image in this direction,
77+
in which case only one image is placed and
78+
'background-position' determines its position in this direction.
79+
80+
<dt><dfn>round</dfn>
81+
<dd>
82+
The image is repeated in the given direction as often as will fit
83+
within the [=background positioning area=].
84+
If it doesn't fit a whole number of times,
85+
it is rescaled so that it does.
86+
See the formula under 'background-size'.
87+
If the [=background painting area=] is larger than the background positioning area,
88+
then the pattern repeats to fill the background painting area.
89+
90+
<dt><dfn>no-repeat</dfn>
91+
<dd>
92+
The image is placed once and not repeated in the given direction.
93+
</dl>
94+
95+
<p>Unless one of the axes is set to ''no-repeat'', the
96+
whole background painting area will be tiled, i.e., not just one
97+
vertical strip and one horizontal strip.
98+
99+
<div class="example">
100+
<p style="display:none">Example(s):
101+
<pre>
102+
body {
103+
background: white url("pendant.png");
104+
background-repeat-y: repeat;
105+
background-position: center;
106+
}
107+
</pre>
108+
109+
<div class="figure">
110+
<p><img src="images/bg-repeat.png" alt="A centered background image, with
111+
copies repeated up and down the border, padding and content
112+
areas.">
113+
114+
<p class="caption">The effect of ''repeat'': One copy
115+
of the background image is centered, and other copies are put above
116+
and below it to make a vertical band behind the element.
117+
</div>
118+
</div>
119+
120+
<p>See the section <a href="https://www.w3.org/TR/css-backgrounds-3/#layering">“Layering multiple background
121+
images”</a> for how
122+
'background-repeat-x',
123+
'background-repeat-y',
124+
'background-repeat-block',
125+
and 'background-repeat-inline'
126+
interact with other comma-separated background properties
127+
to form each background image layer.
128+
129+
<h3 id="background-repeat" oldids="the-background-repeat">
130+
Tiling Images Shorthand: the 'background-repeat' property</h3>
131+
132+
<pre class="propdef">
133+
Name: background-repeat
134+
Value: <<repeat-style>>#
135+
Initial: repeat
136+
Applies to: all elements
137+
Inherited: no
138+
Percentages: N/A
139+
Computed value: list, each item a pair of keywords, one per dimension
140+
Animation type: discrete
141+
</pre>
142+
143+
<p>This shorthand sets the values for the
144+
'background-repeat-x' and 'background-repeat-y' longhand properties.
145+
Where
146+
<pre class=prod><dfn><<repeat-style>></dfn> = repeat-x | repeat-y | <<repetition>>{1,2}</pre>
147+
148+
<p>Single values for <<repeat-style>> have the following
149+
meanings:
150+
151+
<dl dfn-type=value dfn-for=background-repeat>
152+
<dt><dfn>repeat-x</dfn>
153+
<dd>
154+
Computes to ''repeat no-repeat''.
155+
156+
<dt><dfn>repeat-y</dfn>
157+
<dd>
158+
Computes to ''no-repeat repeat''.
159+
160+
<dt>''background-repeat-x/repeat''
161+
<dd>
162+
Computes to ''repeat repeat''.
163+
164+
<dt>''background-repeat-x/space''
165+
<dd>
166+
Computes to ''space space''
167+
168+
<dt>''background-repeat-x/round''
169+
<dd>
170+
Computes to ''round round''
171+
172+
<dt>''background-repeat-x/no-repeat''
173+
<dd>
174+
Computes to ''no-repeat no-repeat''
175+
</dl>
176+
177+
<p>If a <<repeat-style>> value has two keywords, the first
178+
one is for the horizontal direction, the second for the vertical one.
179+
180+
<div class=example>
181+
<p style="display:none">Example(s):
182+
<pre>
183+
body {
184+
background-image: url(dot.png) white;
185+
background-repeat: space
186+
}
187+
</pre>
188+
189+
<div class=figure>
190+
<p><img src="images/bg-space.png" alt="Image of an element with a dotted background">
191+
192+
<p class=caption>The effect of ''background-repeat/space'': the image of a dot is
193+
tiled to cover the whole background and the images are equally
194+
spaced.
195+
</div>
196+
</div>
197+
198+
<p>See the section <a href="https://www.w3.org/TR/css-backgrounds-3/#layering">“Layering multiple background
199+
images”</a> for how 'background-repeat' interacts with other
200+
comma-separated background properties to form each background image
201+
layer.
202+
203+
Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?
204+
40205
<h3 id="the-background-position">
41206
Background Positioning: the 'background-position' shorthand property</h3>
42207

@@ -242,8 +407,6 @@ Background Image Layers: the 'background-tbd' shorthand property</h3>
242407
</pre>
243408
</div>
244409

245-
Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?
246-
247410
<h2 id="changes">
248411
Changes</h2>
249412

0 commit comments

Comments
 (0)