Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-backgrounds-4] Added background-repeat-* longhands #9756

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+166 −2
Open

[css-backgrounds-4] Added background-repeat-* longhands #9756

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
168 changes: 166 additions & 2 deletions css-backgrounds-4/Overview.bs
View file
Open in desktop
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