Tailwind CSS - Background Repeat

Tailwind’s background repeat utilities control how a background image is tiled within an element. This is fundamental for creating patterns, textures, or simply controlling the display of a single background image.

Background Repeat Utility Classes

These classes correspond directly to the CSS background-repeat property, giving you full control over the tiling behavior.

Class	CSS Properties
`bg-repeat`	`background-repeat: repeat;`
`bg-no-repeat`	`background-repeat: no-repeat;`
`bg-repeat-x`	`background-repeat: repeat-x;`
`bg-repeat-y`	`background-repeat: repeat-y;`
`bg-repeat-round`	`background-repeat: round;`
`bg-repeat-space`	`background-repeat: space;`

Visual Comparison of Repeat Utilities

The example below uses a small, pattern-like image to clearly demonstrate the effect of each background repeat utility. A grid layout allows for easy side-by-side comparison.

Pay close attention to the difference between bg-repeat-round (which stretches the image to fit) and bg-repeat-space (which adds space between images to fit).

Example: Repeat Variations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Repeat Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* A small, repeating pattern image is best for this demo */
        .pattern-bg {
            background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
        }
    </style>
</head>
<body class="bg-gray-100 p-8">

    <div class="container mx-auto">
        <h1 class="text-3xl font-bold text-center mb-8">Background Repeat Utilities</h1>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- bg-repeat -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat"></div>
            </div>

            <!-- bg-no-repeat -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-no-repeat`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-no-repeat bg-center"></div>
            </div>

            <!-- bg-repeat-x -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-x`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-x bg-center"></div>
            </div>

            <!-- bg-repeat-y -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-y`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-y bg-center"></div>
            </div>

            <!-- bg-repeat-round -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-round`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-round"></div>
            </div>

            <!-- bg-repeat-space -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-space`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-space"></div>
            </div>

        </div>
    </div>

</body>
</html>

Best Practices and Use Cases

Seamless Patterns: For bg-repeat, use seamless textures or patterns for the best results. These are images designed to tile perfectly without visible edges.
Combining Utilities: Combine repeat utilities with background position utilities (bg-center, bg-top, etc.) and background size utilities (bg-cover, bg-contain) for precise control over your background images.
Arbitrary Values: If you need to set a background image directly in your HTML (as in the example), Tailwind’s arbitrary value syntax is very powerful: bg-[url('...')].
Performance: Using small, repeatable pattern images can be more performant than using a single, large background image, as it results in a smaller file size to download.