In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > backgroundRepeat

backgroundRepeat style property

Browser support:

Specifies or returns how to tile the backgroundImage relative to the upper-left corner of the container object.

With this property you have control over how the image is repeated (repeats vertically, horizontally, in both or in neither direction).

Syntax:

object.backgroundRepeat;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: background-repeat

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

no-repeat

Image is not repeated.

repeat

Default. Image is repeated both horizontally and vertically.

repeat-x

Image is only repeated horizontally.

repeat-y

Image is only repeated vertically.

Default: repeat.

Example HTML code 1:

This example illustrates the use of the background-repeat property:

<head>
    <style>
        .example {
            background-image: url("picture.gif");
            background-repeat: repeat;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="example">
        The background image, 
        <br />
        behind this element 
        <br />
        is repeated vertically
        <br />
        and horizontally, too.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates all available repetitions of the background image in action:

<head>
    <style>
        .example {
            background-image: url("picture.gif");
            background-repeat: repeat;
            width: 200px;
            height: 120px;
            border:1px solid #CCCCCC;
        }

        .norepeat {
            background-repeat: no-repeat;
        }

        .repeatX {
            background-repeat: repeat-x;
        }

        .repeatY {
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="example norepeat">
        The background image 
        <br />
        behind this element 
        <br />
        is not repeated
        <br />
        in any direction.
    </div>

    <br />
    <div class="example repeatX">
        The background image
        <br />
        behind this element 
        <br />
        is repeated only
        <br />
        in horizontal direction.
    </div>

    <br />
    <div class="example repeatY">
        The background image 
        <br />
        behind this element 
        <br />
        is repeated only
        <br />
        in vertical direction.
    </div>

    <br />
    <div class="example">
        The background image
        <br />
        behind this element 
        <br />
        is repeated in both
        <br />
        directions.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the backgroundRepeat property in JavaScript:

<head>
    <style>
        .example {
            background-image: url("picture.gif");
            background-repeat: repeat;
        }
    </style>

    <script type="text/javascript">
        function ChangeRepeat (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            div.style.backgroundRepeat = selectState;
        }

    </script>
</head>
<body>
    <div class="example" id="myDiv">
        Change the repeat mode
        <br />
        of the image behind this
        <br />
        division element.
        <br />
        Vertically, horizontally
        <br />
        or both
    </div>

    <select onchange="ChangeRepeat (this);" size="4">
        <option selected="selected" />repeat
        <option />no-repeat
        <option />repeat-x
        <option />repeat-y
    </select>
</body>