Tailwind CSS Background Repeat

Last Updated : 23 Jul, 2025

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-position property. This class is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.

Background Repeat Classes:

  • bg-repeat
  • bg-no-repeat
  • bg-repeat-x
  • bg-repeat-y
  • bg-repeat-round
  • bg-repeat-space

bg-repeat: This class is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.

Syntax:

<element class="bg-repeat">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
    GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Background Repeat Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-repeat bg-left-top bg-gree-200 
                w-full h-32 border-4"
         style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>

    </div> 
</body> 
</html>

Output:

bg-no-repeat: This class is used to not repeat the background image both horizontally and vertically.

Syntax:

<element class="bg-no-repeat">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
    GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Background no Repeat Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
       <div class="bg-no-repeat bg-left-top 
                   bg-gree-200 w-full h-32 
                   border-4"
            style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>

    </div> 
</body> 
</html>

Output:

bg-repeat-x: This class is used to repeat the background image both horizontally.

Syntax:

<element class="bg-repeat-x">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
    GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Background Repeat X Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
      <div class="bg-repeat-x bg-left-top 
                  bg-gree-200 w-full 
                  h-32 border-4"
           style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
      </div>
    </div> 
</body> 
</html>

Output:

bg-repeat-y: This class is used to repeat the background image both vertically.

Syntax:

<element class="bg-repeat-y">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
    GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Background Repeat Y Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
       <div class="bg-repeat-y bg-left-top
                   bg-gree-200 w-full
                   h-32 border-4"
            style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
       </div>
    </div> 
</body> 
</html>

Output:

bg-repeat-round: This class is used to repeat the image in a manner that will fit the container without any extra space between images.

Syntax:

<element class="bg-repeat-round">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
    GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Background Repeat Round Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
     <div class="bg-repeat-round bg-left-top 
                bg-gree-200 w-full 
                h-32 border-4"
          style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
     </div>
    </div> 
</body> 
</html>

Output:

bg-repeat-space: This class is used to repeat the image in a manner that will fit the container with the required extra space between images.

Syntax:

<element class="bg-repeat-space">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <link
    href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
      GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Background Repeat Space Class</b> 
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
     <div class="bg-repeat-space bg-left-top 
                 bg-gree-200 w-full 
                 h-32 border-4"
          style="background-image:url(
                 https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
     </div>
    </div> 
</body> 
</html>

Output:

Comment

Explore