Bird
Raised Fist0
Tailwindmarkup~5 mins

Background repeat control in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which Tailwind CSS class will make a background image repeat both horizontally and vertically?
easy
A. bg-repeat-x
B. bg-no-repeat
C. bg-repeat
D. bg-repeat-y

Solution

  1. Step 1: Understand the meaning of bg-repeat

    The class bg-repeat makes the background image repeat both horizontally and vertically by default.

  2. Step 2: Compare with other classes

    bg-no-repeat stops repetition, bg-repeat-x repeats only horizontally, and bg-repeat-y repeats only vertically.

  3. Final Answer:

    bg-repeat -> Option C

  4. Quick Check:

    Full background repeat = bg-repeat [OK]
Hint: Full repeat uses bg-repeat class [OK]
Common Mistakes:
  • Confusing bg-no-repeat as repeat
  • Using bg-repeat-x or bg-repeat-y for full repeat
  • Forgetting that bg-repeat repeats both directions
2. Which of the following is the correct Tailwind CSS class to prevent a background image from repeating?
easy
A. bg-no-repeat
B. bg-repeat
C. bg-repeat-all
D. bg-repeat-none

Solution

  1. Step 1: Identify the class that stops repetition

    The class bg-no-repeat stops the background image from repeating.

  2. Step 2: Check other options for validity

    bg-repeat repeats, bg-repeat-all and bg-repeat-none are not valid Tailwind classes.

  3. Final Answer:

    bg-no-repeat -> Option A

  4. Quick Check:

    No repeat = bg-no-repeat [OK]
Hint: No repeat uses bg-no-repeat class [OK]
Common Mistakes:
  • Using bg-repeat instead of bg-no-repeat
  • Assuming bg-repeat-none exists
  • Confusing bg-no-repeat with bg-repeat-x or bg-repeat-y
3. What will be the visual effect of this Tailwind CSS class on a background image?
<div class="bg-repeat-x bg-[url('/pattern.png')] h-40 w-40"></div>
medium
A. Background image repeats only horizontally
B. Background image repeats only vertically
C. Background image repeats both horizontally and vertically
D. Background image does not repeat

Solution

  1. Step 1: Understand the bg-repeat-x class

    This class repeats the background image only along the horizontal axis (left to right).

  2. Step 2: Confirm no vertical repeat

    Since bg-repeat-x is used, vertical repetition is disabled.

  3. Final Answer:

    Background image repeats only horizontally -> Option A

  4. Quick Check:

    bg-repeat-x = horizontal repeat only [OK]
Hint: bg-repeat-x repeats horizontally only [OK]
Common Mistakes:
  • Thinking bg-repeat-x repeats vertically
  • Assuming bg-repeat-x repeats both directions
  • Confusing bg-repeat-x with bg-no-repeat
4. You want a background image to repeat vertically only, but your code uses bg-repeat-x. What is the fix?
medium
A. Use bg-repeat instead
B. Add bg-no-repeat alongside bg-repeat-x
C. Remove all repeat classes
D. Change bg-repeat-x to bg-repeat-y

Solution

  1. Step 1: Identify the wrong class

    bg-repeat-x repeats horizontally, but vertical repeat is needed.

  2. Step 2: Replace with correct class

    bg-repeat-y repeats the background image vertically only.

  3. Final Answer:

    Change bg-repeat-x to bg-repeat-y -> Option D

  4. Quick Check:

    Vertical repeat = bg-repeat-y [OK]
Hint: Vertical repeat uses bg-repeat-y class [OK]
Common Mistakes:
  • Adding bg-no-repeat with bg-repeat-x causing conflicts
  • Removing repeat classes disables repetition
  • Using bg-repeat repeats both directions, not vertical only
5. You want a background image to repeat horizontally but only twice across a wide container. Which Tailwind CSS approach helps achieve this?
hard
A. Use bg-repeat-y and set background-size to 50% height
B. Use bg-repeat-x and set background-size to 50% width
C. Use bg-repeat with bg-no-repeat together
D. Use bg-no-repeat and add multiple images manually

Solution

  1. Step 1: Choose horizontal repeat

    bg-repeat-x repeats the background image horizontally.

  2. Step 2: Control repeat count with background size

    Setting background-size to 50% width means the image covers half the container width, so it repeats twice horizontally.

  3. Final Answer:

    Use bg-repeat-x and set background-size to 50% width -> Option B

  4. Quick Check:

    Repeat count controlled by background-size + bg-repeat-x [OK]
Hint: Control repeats with bg-repeat-x + background-size [OK]
Common Mistakes:
  • Using bg-repeat-y for horizontal repeat
  • Combining bg-repeat and bg-no-repeat causing conflicts
  • Trying to repeat twice without adjusting background-size