Skip to content
Related Articles

Related Articles

Tailwind CSS Background Repeat

Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
Improve Article
Save Article

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.0/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(
    </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.0/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(
    </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.0/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(
      </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.0/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(
       </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.0/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(
     </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.0/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(
     </div>
    </div
</body
</html>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!