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.


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

Property Values

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


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

    <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>

        /* Shared for all DIVS in example */
        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'),
            background-repeat: repeat-x,
            height: 144px;


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


CSS background-repeat Property example output