Backgrounds

Background Repeat

Utilities for sets repetition of a background image.


Class

classcss
bg-repeatbackground-repeat: repeat
bg-no-repeatbackground-repeat: no-repeat
bg-repeat-xbackground-repeat: repeat-x
bg-repeat-ybackground-repeat: repeat-y
bg-repeat-roundbackground-repeat: round
bg-repeat-spacebackground-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

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled