This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Related articles

Background

Attributions