Skip to content

Commit

Permalink
[css-backgrounds-4] Added background-repeat-* longhands
Browse files Browse the repository at this point in the history
  • Loading branch information
@SebastianZ
SebastianZ committed Jan 1, 2024
1 parent 6eb6f42 commit 508b7af
Showing 1 changed file with 166 additions and 2 deletions.
168 changes: 166 additions & 2 deletions css-backgrounds-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,171 @@ Introduction</h2>
<h2 id="backgrounds">
Backgrounds</h2>

<h3 id="background-repeat-longhands">
Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-repeat-block', and 'background-repeat-inline' properties</h3>

<pre class="propdef">
Name: background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline
Value: <<repetition>>#
Initial: repeat
Inherited: no
Percentages: N/A
Computed value: as specified
Animation type: discrete
</pre>

<pre class="prod">
<dfn><<repetition>></dfn> = repeat | space | round | no-repeat
</pre>

<p>These properties specify whether and how background images are tiled
along one axis after they have been
<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>.

<dl dfn-type=value dfn-for="background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline">
<dt><dfn>repeat</dfn>
<dd>
The image is repeated in the given direction as often as needed
to cover the [=background painting area=].

<dt><dfn>space</dfn>
<dd>
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.

<dt><dfn>round</dfn>
<dd>
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.

<dt><dfn>no-repeat</dfn>
<dd>
The image is placed once and not repeated in the given direction.
</dl>

<p>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.

<div class="example">
<p style="display:none">Example(s):
<pre>
body {
background: white url("pendant.png");
background-repeat-y: repeat;
background-position: center;
}
</pre>

<div class="figure">
<p><img src="images/bg-repeat.png" alt="A centered background image, with
copies repeated up and down the border, padding and content
areas.">

<p class="caption">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.
</div>
</div>

<p>See the section <a href="https://www.w3.org/TR/css-backgrounds-3/#layering">“Layering multiple background
images”</a> 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.

<h3 id="background-repeat" oldids="the-background-repeat">
Tiling Images Shorthand: the 'background-repeat' property</h3>

<pre class="propdef">
Name: background-repeat
Value: <<repeat-style>>#
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
</pre>

<p>This shorthand sets the values for the
'background-repeat-x' and 'background-repeat-y' longhand properties.
Where
<pre class=prod><dfn><<repeat-style>></dfn> = repeat-x | repeat-y | <<repetition>>{1,2}</pre>

<p>Single values for <<repeat-style>> have the following
meanings:

<dl dfn-type=value dfn-for=background-repeat>
<dt><dfn>repeat-x</dfn>
<dd>
Computes to ''repeat no-repeat''.

<dt><dfn>repeat-y</dfn>
<dd>
Computes to ''no-repeat repeat''.

<dt>''background-repeat-x/repeat''
<dd>
Computes to ''repeat repeat''.

<dt>''background-repeat-x/space''
<dd>
Computes to ''space space''

<dt>''background-repeat-x/round''
<dd>
Computes to ''round round''

<dt>''background-repeat-x/no-repeat''
<dd>
Computes to ''no-repeat no-repeat''
</dl>

<p>If a <<repeat-style>> value has two keywords, the first
one is for the horizontal direction, the second for the vertical one.

<div class=example>
<p style="display:none">Example(s):
<pre>
body {
background-image: url(dot.png) white;
background-repeat: space
}
</pre>

<div class=figure>
<p><img src="images/bg-space.png" alt="Image of an element with a dotted background">

<p class=caption>The effect of ''background-repeat/space'': the image of a dot is
tiled to cover the whole background and the images are equally
spaced.
</div>
</div>

<p>See the section <a href="https://www.w3.org/TR/css-backgrounds-3/#layering">“Layering multiple background
images”</a> for how 'background-repeat' interacts with other
comma-separated background properties to form each background image
layer.

Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?

<h3 id="the-background-position">
Background Positioning: the 'background-position' shorthand property</h3>

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

Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?

<h2 id="changes">
Changes</h2>

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

<h2 id="acknowledgments">
Acknowledgments</h2>
Expand Down

0 comments on commit 508b7af

Please sign in to comment.