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

You are here: Reference > CSS > properties > background-repeat

background-repeat property

Browser support:

Specifies how to tile the background-image 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).

JavaScript page for this property: backgroundRepeat. You can find other example(s) there.

Possible values:

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>