Style backgroundRepeat Property

Definition and Usage

backgroundRepeat How to set or return how the background image is repeated (tiled).

See also:

HTML Styles:background property

CSS Tutorial:CSS Background

CSS3 Tutorial:CSS3 Backgrounds

CSS Reference Manual:background-repeat property

Example

Example 1

Set the background image to not repeat (no-repeat):

document.body.style.backgroundRepeat = "repeat-y";

Try it yourself

Example 2

Change the backgroundRepeat property of the specified DIV element:

document.getElementById("myDIV").style.backgroundRepeat = "repeat-x";

Try it yourself

Example 3

Set the background image to repeat horizontally or vertically:

function repeatVer() {
  document.body.style.backgroundRepeat = "repeat-y";
}
function repeatHor() {
  document.body.style.backgroundRepeat = "repeat-x";
}

Try it yourself

Example 4

Return the background-repeat value of the document:

alert(document.body.style.backgroundRepeat);

Try it yourself

Syntax

Return the backgroundRepeat property:

object.style.backgroundRepeat

Set the backgroundRepeat property:

object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit"

Property value

Value Description
repeat The background image is repeated vertically and horizontally. Default.
repeat-x The background image is repeated horizontally only.
repeat-y The background image is repeated vertically only.
no-repeat The background image is not repeated.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: repeat
Return value: A string indicating how the background image is repeated.
CSS version: CSS1

Browser support

backgroundRepeat It is a CSS1 (1996) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support Support