CSS background-repeat Property

Description

The background-repeat property in CSS is used to control how a background image is repeated within an element. By default, most background images repeat both horizontally and vertically to fill the entire area of the element. However, there are situations where repeating the image in one direction, or not at all, can dramatically change the visual appearance of a design. Understanding and manipulating the repetition behavior is crucial for creating patterns, textures, or custom designs that align precisely with the layout of a page.

In addition to controlling the repetition itself, background-repeat works closely with other background-related properties. For example, background-size allows you to resize a background image, which can affect how and when the image repeats. When combined, these properties give designers precise control over the placement, scale, and tiling of images. For instance, a small repeating image can create a seamless pattern, whereas a larger image might only appear once without repetition, creating a more dramatic visual effect.

Moreover, background-repeat is useful in responsive design contexts. By choosing whether an image should repeat horizontally, vertically, or not at all, designers can ensure that background visuals adapt gracefully to different screen sizes and orientations. For example, a horizontal stripe pattern might only repeat along the x-axis, maintaining its look across wide layouts, while vertical repetition could suit tall sidebars. Additionally, this property interacts with background-position, as the starting point of the image can influence how the repetition aligns with the rest of the content, allowing for more creative and intentional designs.

Definition

Initial value: repeat
Applies to: All elements
Inherited: No
Computed value: A list, each item consisting of: two keywords, one per dimension
Animatable: No
JavaScript syntax: object.style.backgroundRepeat

Interactive Demo

background-repeat: repeat-x;

background-repeat: repeat;

background-repeat: space;

background-repeat: round;

background-repeat: no-repeat;

background-repeat: space repeat;

Syntax

background-repeat: <repeat-style> [ , <repeat-style> ]*

Values

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

repeatThe image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.
repeat-xThe image is repeated along the horizontal axis.
repeat-yThe image is repeated along the vertical axis.
no-repeatThe image is not repeated.
spaceThe image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. (CSS3)
roundThe image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. (CSS3)
inherit

Example

HTML

<div class='container'>

    <h2>background-repeat examples</h2>



    <div class='grid'>

        <div class='example repeat'>

            <span class='label'>repeat</span>

        </div>



        <div class='example repeat-x'>

            <span class='label'>repeat-x</span>

        </div>



        <div class='example repeat-y'>

            <span class='label'>repeat-y</span>

        </div>



        <div class='example no-repeat'>

            <span class='label'>no-repeat</span>

        </div>



        <div class='example round'>

            <span class='label'>round</span>

        </div>



        <div class='example space'>

            <span class='label'>space</span>

        </div>

    </div>

</div>

CSS

/* Simple demo of background-repeat values */

:root {
    --tile: url('data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27><circle cx=%2710%27 cy=%2710%27 r=%274%27 fill=%27%23e74c3c%27/></svg>');
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    padding: 24px;
    background: #f5f7fa;
    color: #222;
}

.container {
    max-width: 980px;
    margin: 0 auto;
}

h2 {
    margin: 0 0 18px 0;
    font-size: 18px;
    font-weight: 600;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.example {
    height: 140px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    padding: 12px;
    /* common tile image used for all examples */
    background-image: var(--tile);
    background-color: transparent;
}

.example .label {
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 1;
}

/* Different background-repeat values */
.example.repeat {
    background-repeat: repeat; /* default: tiles both directions */
}

.example.repeat-x {
    background-repeat: repeat-x; /* tiles only horizontally */
}

.example.repeat-y {
    background-repeat: repeat-y; /* tiles only vertically */
}

.example.no-repeat {
    background-repeat: no-repeat; /* single image only */
    background-position: center;
}

/* 'round' and 'space' show different tiling behaviors with a set background-size */
.example.round {
    background-repeat: round; /* tile image scaled so a whole number fits */
    background-size: 36px 36px;
}

.example.space {
    background-repeat: space; /* tiles with equal spacing; may leave gaps */
    background-size: 36px 36px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-repeat property. Hover over a browser icon to see the version that first introduced support for this CSS property.