backgroundRepeat Property (A, ADDRESS, ARTICLE, ...)

Switch View :
Classic
Lightweight
ScriptFree
background-repeat Attribute | backgroundRepeat Property

Gets or sets how the backgroundImage property of the object is tiled.

Syntax

CSS { background-repeat : sRepeat }
Scripting [ sRepeat = ] object.style.backgroundRepeat

Possible Values

sRepeat String that specifies or receives one of the following values.
repeat
Default. Image is repeated horizontally and vertically.
no-repeat
Image is not repeated.
repeat-x
Image is repeated horizontally.
repeat-y
Image is repeated vertically.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of repeat. The Cascading Style Sheets (CSS) attribute is not inherited.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.

Remarks

The repeat-x and repeat-y values make the image repeat horizontally and vertically, respectively, creating a single band of images from one side to the other.

This property can be set with other background properties by using the background composite property.

 New for Windows Internet Explorer 9 In Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties ( background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

Examples

The following examples use the background-repeat attribute and the backgroundRepeat 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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background-repeat.htm

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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/backgroundRepeat.htm

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1).

Applies To

A, ADDRESS, ARTICLE, ASIDE, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CSSStyleDeclaration, currentStyle, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FIGCAPTION, FIGURE, FOOTER, FORM, HEADER, HGROUP, hn, HTML, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARK, MARQUEE, MENU, NAV, NOBR, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SECTION, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor