Press/to search

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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.