HTML - DOM Style Object backgroundRepeat Property

Quiz

HTML DOM Style Object backgroundRepeat property sets or returns how a background image is to be repeated.

Syntax

Given below are the syntax to get or set the backgroundRepeat property.

Set the backgroundRepeat property:

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

Get the backgroundRepeat property:

object.style.backgroundRepeat;

Property Values

Value	Description
repeat	It is default value which repeats the background image on the both axis that is both horizontally and vertically.
repeat-x	It repeats the background image on x-axis or horizontally.
repeat-y	It repeats the background image on y-axis or vertically.
no-repeat	It does not allow repetition of image.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents how a background image is repeated.

Examples of HTML DOM Style Object 'backgroundRepeat' Property

The following examples illustrates different property values of backgroundRepeat property.

Set the Background image to no Repeat

The following example sets the background image to repeat and no repeat.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundPosition Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png');
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to repeat or stop repeating.</p>
    <button onclick="norepeat()">No Repeat</button>
    <button onclick="repeat()">Repeat</button>
    <script>
        function norepeat(){
            document.body.style.backgroundRepeat="no-repeat";
        }
        function repeat(){
            document.body.style.backgroundRepeat="repeat";
        }
    </script>
</body>
</html>

Set Repeat on both axis

The following example sets the background image to repeat horizontally and vertically.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object backgroundRepeat Property</title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to repeat on x-axis.</p>
    <button onclick="repx()">Repeat</button>
    <p>Click to repeat on y-axis.</p>
    <button onclick="repy()">Repeat</button>
    <script>
        function repx(){
            document.body.style.backgroundRepeat="repeat-x";
        }
        function repy(){
            document.body.style.backgroundRepeat="repeat-y";
        }
    </script>
</body>
</html>

Supported Browsers

Property
backgroundRepeat	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page