mozilla

Revision 21145 of background-repeat

  • Revision slug: CSS/background-repeat
  • Revision title: background-repeat
  • Revision id: 21145
  • Created:
  • Creator: Readams
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSRef()}}

Summary

background-repeat specifies whether the image is repeated (tiled), and how.

  • Initial value: repeat
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: as specified

Syntax

background-position: repeat | repeat-x | repeat-y | no-repeat | inherit

Values

repeat
The image is repeated both horizontally and vertically.
repeat-x
The image is repeated horizontally only.
repeat-y
The image is repeated vertically only.
no-repeat
The image is not repeated: only one copy of the image is drawn.


Examples

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

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

Specifications

Browser Compatibility

TBD: This may be removed in favour of a centralized compatibility chart.

See Also

{{wiki.template('CSS_Reference:Background')}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>background-repeat</code> specifies whether the image is repeated (tiled), and how.
</p>
<ul><li> Initial value: repeat
</li><li> Applies to: all elements
</li><li> Inherited: no
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: as specified 
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">background-position: repeat | repeat-x | repeat-y | no-repeat | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> repeat</dt><dd> The image is repeated both horizontally and vertically.
</dd><dt> repeat-x</dt><dd> The image is repeated horizontally only.
</dd><dt> repeat-y</dt><dd> The image is repeated vertically only.
</dd><dt> no-repeat</dt><dd> The image is not repeated: only one copy of the image is drawn.
</dd></dl>
<p><br>
</p>
<h3 name="Examples"> Examples </h3>
<pre>.exampleone {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}

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

</pre>
<h3 name="Specifications"> Specifications </h3>
<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>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<p>TBD: This may be removed in favour of a centralized compatibility chart.
</p>
<h3 name="See_Also"> See Also </h3>
<p>{{wiki.template('CSS_Reference:Background')}}
</p>
Revert to this revision