CSS background-repeat Property

If a background-image property is specified, the background-repeat property in CSS defines how it will repeat. It also decides whether the background-image will be repeated or not.

By default, a background-image is repeated both vertically and horizontally.

A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Contents hide
Syntax
Property Values
Example

Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Property Values

ValueDescription
repeatThe default value. The background image will be repeated both vertically and horizontally.
repeat-xThe background image will be repeated horizontally only.
repeat-yThe background image will be repeated vertically only.
no-repeatThe background image will not be repeated.
initialSets this property to its default value.
inheritIf specified, the associated element takes the computed value of its parent element background-repeat property.
CSS background-repeat Property Values

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS background-repeat Property example</title>

    <style>
        /* Shared for all DIVS in example */
        ol,
        li {
            margin: 0;
            padding: 0;
        }

        li {
            margin-bottom: 12px;
        }

        div {
            background-image: url('https://eywiah.com/wp-content/uploads/2022/01/image-84.png');
            width: 160px;
            height: 70px;
        }

        /* Background repeats */
        .one {
            background-repeat: no-repeat;
        }

        .two {
            background-repeat: repeat;
        }

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

        .four {
            background-repeat: repeat-y;
        }

        .five {
            background-repeat: space;
        }

        .six {
            background-repeat: round;
        }

        /* Multiple images */
        .seven {
            background-image: url('https://eywiah.com/wp-content/uploads/2022/01/image-84.png'),
                url('https://eywiah.com/wp-content/uploads/2022/01/cropped-fevicon-32x32.jpg');
            background-repeat: repeat-x,
                repeat-y;
            height: 144px;
        }
    </style>

</head>

<body>
    <ol>
        <li>no-repeat
            <div class="one"></div>
        </li>
        <li>repeat
            <div class="two"></div>
        </li>
        <li>repeat-x
            <div class="three"></div>
        </li>
        <li>repeat-y
            <div class="four"></div>
        </li>
        <li>space
            <div class="five"></div>
        </li>
        <li>round
            <div class="six"></div>
        </li>
        <li>repeat-x, repeat-y (multiple images)
            <div class="seven"></div>
        </li>
    </ol>

</body>

</html>
CSS background-repeat Property example output