0
0
Tailwindmarkup~5 mins

Background repeat control in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Background repeat control helps you decide if a background image should repeat or show only once. This makes your webpage look neat and clear.

When you want a pattern to cover the whole background by repeating.
When you want a single image to appear once without repeating.
When you want to repeat the image only horizontally or vertically.
When you want to stop the background image from repeating to avoid clutter.
When you want to create a special design effect with repeated images.
Syntax
Tailwind
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space

Use these classes on any element with a background image.

They control how the background image repeats inside the element.

Examples
This repeats the background image both horizontally and vertically to fill the box.
Tailwind
<div class="bg-repeat bg-[url('/pattern.png')] h-40 w-40"></div>
This shows the background image only once without repeating.
Tailwind
<div class="bg-no-repeat bg-[url('/logo.png')] h-40 w-40"></div>
This repeats the background image only horizontally (left to right).
Tailwind
<div class="bg-repeat-x bg-[url('/stripe.png')] h-40 w-40"></div>
This repeats the background image only vertically (top to bottom).
Tailwind
<div class="bg-repeat-y bg-[url('/line.png')] h-40 w-40"></div>
Sample Program

This page shows four boxes with different background repeat settings using Tailwind CSS. Each box has a border and fixed size so you can see how the background image repeats or not.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Repeat Control Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Background Repeat Control with Tailwind</h1>

  <section class="mb-6">
    <h2 class="mb-2">Repeating Background</h2>
    <div class="bg-repeat bg-[url('https://tailwindcss.com/img/pattern.svg')] h-40 w-40 border border-gray-300"></div>
  </section>

  <section class="mb-6">
    <h2 class="mb-2">No Repeat Background</h2>
    <div class="bg-no-repeat bg-[url('https://tailwindcss.com/img/logo.svg')] h-40 w-40 border border-gray-300"></div>
  </section>

  <section class="mb-6">
    <h2 class="mb-2">Repeat Horizontally Only</h2>
    <div class="bg-repeat-x bg-[url('https://tailwindcss.com/img/pattern.svg')] h-40 w-40 border border-gray-300"></div>
  </section>

  <section>
    <h2 class="mb-2">Repeat Vertically Only</h2>
    <div class="bg-repeat-y bg-[url('https://tailwindcss.com/img/pattern.svg')] h-40 w-40 border border-gray-300"></div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use bg-no-repeat to show the image only once.

Use bg-repeat-x or bg-repeat-y to repeat in one direction.

Make sure your background image URL is correct and accessible.

Summary

Background repeat control helps you manage how background images fill an area.

Tailwind CSS provides simple classes like bg-repeat and bg-no-repeat to control this.

Use these classes to make your webpage backgrounds look clean and intentional.