Tailwind CSS - Background Repeat

Previous
Quiz
Next

Tailwind CSS Background Repeat is a utility that specifies the repeating behavior of a background image within an element.

Tailwind CSS Background Repeat Classes

The following is the list of Tailwind CSS Background Origin Classes that are used to set the repetition of a background image.

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;

Functionality of Tailwind CSS Background Repeat Classes

  • bg-repeat: This class is used to repeat the background image both vertically and horizontally.
  • bg-no-repeat: This class is used to prevent the repetition of background images.
  • bg-repeat-x: This class is used to repeat the background image horizontally.
  • bg-repeat-y: This class is used to repeat the background image vertically.
  • bg-repeat-round: This class is used to repeat the background image so that it will be fitted inside the container without having extra space between images.
  • bg-repeat-space: This class is used to repeat the background image so that it will be fitted inside the container with extra space between images.

Tailwind CSS Background Repeat Example

The following example will illustrate the different repeating behavior of a background image within an element.

Repeating Background Image

The below example illustrates the use of bg-repeat class.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Repeat Class
    </h2>
    <div class="w-full h-72 bg-repeat border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Preventing Background Image Repetition

The below example illustrates the use of bg-no-repeat class.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg No Repeat Class
    </h2>
    <div class="w-full h-72 bg-no-repeat border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Repeating Background Image horizontally

The below example illustrates the use of bg-repeat-x class.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Repeat X Class
    </h2>
    <div class="w-full h-72 bg-repeat-x border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Repeating Background Image Vertically

The below example illustrates the use of bg-repeat-y class.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Repeat Y Class
    </h2>
    <div class="w-full h-72 bg-repeat-y border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Eliminating Extra Space Between Background Images

The below example illustrates the use of bg-repeat-round class.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Repeat Round Class
    </h2>
    <div class="w-full h-72 bg-repeat-round border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Adding Extra Space Between Background Images

The below example illustrates the use of bg-repeat-space class.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Repeat Space Class
    </h2>
    <div class="w-full h-72 bg-repeat-space border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>
Print Page
Previous
Next