Backgrounds
Background Repeat
Utilities for sets repetition of a background image.
Class
class | css |
---|---|
bg-repeat | background-repeat: repeat |
bg-no-repeat | background-repeat: no-repeat |
bg-repeat-x | background-repeat: repeat-x |
bg-repeat-y | background-repeat: repeat-y |
bg-repeat-round | background-repeat: round |
bg-repeat-space | background-repeat: space |
Usage
Set repeating background image with HTML inline attribute style="..."
and a CSS property background-image: url(...)
to an element.
<!-- Example -->
<y class="bg-repeat ... h-48 w-64"
style="background-image:url(...)"></y>
Set no-repeating background image.
<!-- Example -->
<y class="bg-no-repeat ... h-48 w-64"
style="background-image:url(...)"></y>
Set repeating background image horizontally.
<!-- Example -->
<y class="bg-repeat-x ... h-48 w-64"
style="background-image:url(...)"></y>
Set repeating background image vertically.
<!-- Example -->
<y class="bg-repeat-y ... h-48 w-64"
style="background-image:url(...)"></y>
Set repeating resized background image horizontally and vertically.
<!-- Example -->
<y class="bg-repeat-round ... h-48 w-64"
style="background-image:url(...)"></y>
Set repeating no-resized background image horizontally and vertically.
<!-- Example -->
<y class="bg-repeat-space ... h-48 w-64"
style="background-image:url(...)"></y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |