Background repeat

Utilities for controlling the repetition of an element’s background image.

In this article

Class Properties
.bg-no-repeat background-repeat: no-repeat;
.bg-repeat background-repeat: repeat;
.bg-repeat-x background-repeat: repeat-x;
.bg-repeat-y background-repeat: repeat-y;


No repeat

Use .bg-no-repeat when you don’t want to repeat the background image.

<div class="bg-no-repeat bg-gray-100"></div>


Use .bg-repeat to repeat the background image both vertically and horizontally.

<div class="bg-repeat bg-gray-100"></div>

Use .bg-repeat-x to repeat the background image only horizontally.

Use .bg-repeat-y to repeat the background image only vertically.


By default, only responsive variants are generated for background repeat utilities.


To control if and how the background repeats for an element at a specific breakpoint, add a {screen}: prefix to any existing background repeat utility.

For example, use .md:bg-no-repeat to apply the bg-no-repeat utility at only medium screen sizes and above.


To include hover-state variants like .hover:bg-no-repeat, add "background-repeat" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know