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>
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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content