| 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",
);