Tailwind CSS Background Repeat

The background-repeat utility class sets the background-repeat property of an element. This utility helps to repeat the background image of an element according to a defined pattern.

Here is the syntax for using the background-repeat utility class in Tailwind CSS:

<div class="bg-repeat-{value}"></div>

The {value} can be any of the following:

• repeat
• no-repeat
• repeat-x
• repeat-y

Example

Let's take a look at an example to understand how the background-repeat utility class works:

<div class="bg-repeat-repeat bg-cover bg-center h-64" style="background-image:url('image.jpg')"></div>

In the above example, the class bg-repeat-repeat specifies that the background image should be repeated horizontally and vertically. bg-cover class sets the background image size to cover the entire element and bg-center class centers the background image.

Output

The output of the above example will be a div element with the specified background image and the image is repeated in both horizontal and vertical directions.

Explanation

When we apply the bg-repeat-{value} class to an element, it sets the background-repeat property of that element. The {value} can be any of the four options outlined above.

• repeat - This value repeats the image both vertically and horizontally.
• no-repeat - This value does not repeat the image.
• repeat-x - This value repeats the image only horizontally.
• repeat-y - This value repeats the image only vertically.

The default value for background-repeat is repeat.

Use Cases

The background-repeat utility class can be used in a variety of scenarios where the background image needs to be repeated.

• In a webpage header section where the image needs to be repeated horizontally.
• In a webpage footer section where the image needs to be repeated vertically.
• In a webpage hero section where the image needs to be repeated both horizontally and vertically.

Important Points

• The background-repeat utility class is dependent on the background image of an element.
• If you do not specify the background-image property, then the background-repeat property will not take effect.
• You can also apply the bg-{value} utility class to set a background color for an element.

Summary

In this tutorial, we learned about the background-repeat utility class of Tailwind CSS. We covered its syntax, examples, output, explanation, use cases, and important points. The background-repeat utility class is an incredibly useful tool when you need to repeat the background image of an element according to a defined pattern.