mozilla

Revision 21169 of background-repeat

  • Revision slug: CSS/background-repeat
  • Revision title: background-repeat
  • Revision id: 21169
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 50 words added

Revision Content

{{ CSSRef() }}

Summary

The background-repeat CSS properties defines how the background images are repeated.

If the value of this property is not set in a {{ cssxref("background") }} shorthand property that is applied to the element after the background-repeat CSS property, the value of this property is then reset to its initial value by the shorthand property.
  • {{ Xref_cssinitial() }}: repeat
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

background-repeat: repeat-style[, repeat-style]*

where:

repeat-style
Is following either the one-value syntax — and in that case the values are shorthand for ther two-value equivalent:
repeat-x is the equivalent of repeat no-repeat
repeat-y is the equivalent of no-repeat repeat
repeat is the equivalent of repeat repeat
space is the equivalent of space space
round is the equivalent of round round
no-repeat is the equivalent of no-repeat no-repeat
Or the two-value syntax where the first value represent the horizontal behavior of the repetition and the second value the vertical behavior:

repeat The image is repeated in the given direction as much as needed to cover the whole background image painting area. The last image may be clipped if needed.
space The image is repeated in the given direction as much as needed to cover most of the background image painting area, without clipping an image. The remaining non-covered space is spaced out evenly between the images. The first and last images touches the edge of the element. The value of the {{ cssxref("background-position") }} CSS property is ignored for the concerned direction, except if one single image is greater than the background image painting area, which is the only case where an image can be clipped when the space value is used.
round The image is repeated in the given direction as much as needed to cover most of the background image painting area, without clipping an image. If it doesn't cover exactly the area, the tiles are resized in that direction in order to match it.
no-repeat The image is not repeated (and hence the background image painting area will not necessarily been entirely covered). The position of the non-repeated background image is defined by the {{ cssxref("background-position") }} CSS property.

Examples

{{ CSSLiveSample("background-repeat") }}

.exampleone {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}

.exampletwo {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}

.examplethree {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 

Each image is matched with the corresponding repeat style, from first specified to last.

Specifications

Browser compatibility

Browser Lowest Version Space | Round Multiple Backgrounds Different Values for X & Y
Chrome 1.0 -- 1.0
Firefox (Gecko) 1.0 (1.0) -- 3.6 (1.9.2) --
Internet Explorer 4.0 9.0 9.0 9.0
Opera 3.5 10.5 10.5
Safari (Webkit) 1.0 (85) -- 1.3 (312)

Round / Space values are supported in IE9+ and Opera 11+

See also

{{ languages( { "de": "de/CSS/background-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 name="Summary">Summary</h2>
<p>The <code>background-repeat</code> CSS properties defines how the background images are repeated.</p>
<div class="note">If the value of this property is not set in a {{ cssxref("background") }} shorthand property that is applied to the element after the <code>background-repeat</code> CSS property, the value of this property is then reset to its initial value by the shorthand property.</div>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }}: <code>repeat</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2 name="Syntax">Syntax</h2>
<pre class="eval syntaxbox">background-repeat: <em>repeat-style</em>[, <em>repeat-style</em>]*
</pre>
<p>where:</p>
<dl> <dt><em>repeat-style</em></dt> <dd>Is following either the one-value syntax — and in that case the values are shorthand for ther two-value equivalent:<br> <table class="standard-table"> <tbody> <tr> <td><code>repeat-x</code></td> <td>is the equivalent of <code>repeat no-repeat</code></td> </tr> <tr> <td><code>repeat-y</code></td> <td>is the equivalent of <code>no-repeat repeat</code></td> </tr> <tr> <td><code>repeat</code></td> <td>is the equivalent of <code>repeat repeat</code></td> </tr> <tr> <td><code>space</code></td> <td>is the equivalent of <code>space space</code></td> </tr> <tr> <td><code>round</code></td> <td>is the equivalent of <code>round round</code></td> </tr> <tr> <td><code>no-repeat</code></td> <td>is the equivalent of <code>no-repeat no-repeat</code></td> </tr> </tbody> </table> Or the two-value syntax where the first value represent the horizontal behavior of the repetition and the second value the vertical behavior:<br> <br> <table class="standard-table"> <tbody> <tr> <td><code>repeat</code></td> <td>The image is repeated in the given direction as much as needed to cover the whole background image painting area. The last image may be clipped if needed.</td> </tr> <tr> <td><code>space</code></td> <td>The image is repeated in the given direction as much as needed to cover most of the background image painting area, without clipping an image. The remaining non-covered space is spaced out evenly between the images. The first and last images touches the edge of the element. The value of the {{ cssxref("background-position") }} CSS property is ignored for the concerned direction, except if one single image is greater than the background image painting area, which is the only case where an image can be clipped when the <code>space</code> value is used.</td> </tr> <tr> <td><code>round</code></td> <td>The image is repeated in the given direction as much as needed to cover most of the background image painting area, without clipping an image. If it doesn't cover exactly the area, the tiles are resized in that direction in order to match it.</td> </tr> <tr> <td><code>no-repeat</code></td> <td>The image is not repeated (and hence the background image painting area will not necessarily been entirely covered). The position of the non-repeated background image is defined by the {{ cssxref("background-position") }} CSS property.</td> </tr> </tbody> </table> </dd>
</dl>
<div> <h2 name="Examples">Examples</h2> <p>{{ CSSLiveSample("background-repeat") }}</p> <pre>.exampleone {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}

.exampletwo {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}

.examplethree {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 
</pre> <p>Each image is matched with the corresponding repeat style, from first specified to last.</p> <h2 name="Specifications">Specifications</h2> <ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#background-repeat">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-repeat">CSS 3</a></li> </ul> <h2 name="Browser_compatibility">Browser compatibility</h2> <table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Space | Round</th> <th>Multiple Backgrounds</th> <th>Different Values for X &amp; Y</th> </tr> <tr> <td>Chrome</td> <td>1.0</td> <td>--</td> <td>1.0</td> <td>√</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>--</td> <td>3.6 (1.9.2)</td> <td>--</td> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>9.0</td> <td>9.0</td> <td>9.0</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> <td>10.5</td> <td>√</td> </tr> <tr> <td>Safari (Webkit)</td> <td>1.0 (85)</td> <td>--</td> <td>1.3 (312)</td> <td>√</td> </tr> </tbody> </table> <p>Round / Space values are supported in IE9+ and Opera 11+</p> <h2 name="See_also">See also</h2> <ul> <li>{{ CSS_Reference:Background() }}</li> <li><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li> </ul> <p>{{ languages( { "de": "de/CSS/background-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}</p>
</div>
Revert to this revision