Tailwind CSS Background Repeat

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:

Output:

👁 Image

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:

Output:

👁 Image

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

Syntax:

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

Example:

Output:

👁 Image

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

Syntax:

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

Example:

Output:

👁 Image

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:

Output:

👁 Image

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:

Output:

👁 Image