Sections

Background repeat

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

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;

Usage

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>

Repeat

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.

Variants

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

Responsive

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.

Hover-state

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

$hover-variants: (
  // ...
  "background-repeat",
);