background-repeat

Summary

Background-repeat defines if and how background images will be repeated after they have been sized and positioned

Overview table

Initial value: repeat
Applies to: All elements
Inherited: No
Media: visual
Computed value: A list, each item consisting of two keywords, one per dimension
Animatable: No
CSS Object Model Property: backgroundRepeat
Percentages: N/A

Syntax

background-repeat: <repeat-style>

Values

<repeat-style>: Keyword(s) indicating the repeat pattern.
repeat: Default. In CSS2.1, the image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.
no-repeat; The image is not repeated.
repeat-x; The image is repeated along the horizontal axis.
repeat-y; The image is repeated along the vertical axis.
round; The image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. (CSS3)
space; The image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. (CSS3)

Examples

The following examples use the background-repeat attribute and the background-repeat property to specify whether the background image is tiled.

This example uses a call to an embedded (global) style sheet to tile the image.

<STYLE>
    .style1 { background-image:url(sphere.jpg);
        background-repeat:repeat }
    .style2 { background-image:url(sphere.jpeg);
        background-repeat:no-repeat }
</STYLE>
</HEAD>
<BODY>
<SPAN onmouseover="this.className='style1'"
onmouseout="this.className='style2'" onclick="this.className=''">
. . . </SPAN>

View live example

This example shows how to use inline scripting to tile the image.

<SPAN onmouseover="this.style.backgroundImage='url(sphere.jpeg)';
this.style.backgroundRepeat='repeat'">
:
</SPAN>

View live example

Usage

 In CSS2.1, only one keyword is permitted, affecting both the horizontal and vertical axes.

In CSS3, one or two keywords are permitted. One keyword affects both axes in the same way as CSS2.1 If two keywords are used, the first applies to the horizontal axis, and the second to the vertical axis.

If an element has multiple background images, the repeat pattern for each image can be set by assigning a comma-separated list of individual values. The values are applied to the background images in the same order as they are listed in the background-image property.

Related specifications

CSS Level 3: Candidate Recommendation
CSS Level 2 (revision 1): Recommendation
CSS Level 1: Recommendation

Attributions

Mozilla Developer Network .
Microsoft Developer Network: [Windows Internet Explorer API reference Article]