Javascript Reference - HTML DOM Style backgroundRepeat Property

The backgroundRepeat property sets or gets how to repeat a background-image.

Browser Support


`backgroundRepeat`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the backgroundRepeat property:

var v = object.style.backgroundRepeat

Set the backgroundRepeat property:

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

Property Values

Value	Description
repeat-x	Repeats the image horizontally and the image may be fragmented.
repeat-y	Repeats the image vertically and the image may be fragmented.
repeat	Repeats the image in both directions and the image may be fragmented.
space	The image is repeated to fill the space without creating fragments.
round	The image is scaled to repeat without creating fragments.
no-repeat	The image is not repeated.

Technical Details

Default Value:	repeat
Return Value:	A string representing background-repeat property
CSS Version	CSS1

Example

The following code shows how to set a background image to no-repeat.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   ww w. j  av  a 2  s.com-->
    background: #f3f3f3 url('http://java2s.com/style/demo/border.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.body.style.backgroundRepeat = "no-repeat";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the backgroundRepeat property of a specified DIV element


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w  ww  .j  av a  2  s.c om-->
    border: 1px solid black;
    width: 300px;
    height: 150px;
    background: url('http://java2s.com/style/demo/border.png') no-repeat;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV"><h1>Hello</h1></div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.backgroundRepeat = "repeat-x";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to set a background-image to repeat horizontally or vertically.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   w  w w.  java 2s . com-->
    background: #f3f3f3 url('http://java2s.com/style/demo/border.png');
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<button type="button" onclick="repeatVert()">vertical</button>
<button type="button" onclick="repeatHori()">horizontal</button>

<script>
function repeatVert() {
    document.body.style.backgroundRepeat = "repeat-y";
}

function repeatHori() {
    document.body.style.backgroundRepeat = "repeat-x";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the background-repeat value.


<!DOCTYPE html>
<html>
<body style="background:#f3f3f3 url('http://java2s.com/style/demo/border.png');background-repeat:repeat-y;">
<!--from  w ww  .j  a v  a2  s.  c o m-->
<h1>Hello World!</h1>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.body.style.backgroundRepeat);
}
</script>

</body>
</html>

The code above is rendered as follows: