Backgrounds

Background Position

Utilities for sets position of a background image.


Class

classcss
bg-topbackground-position: top
bg-bottombackground-position: bottom
bg-centerbackground-position: center
bg-leftbackground-position: left
bg-left-bottombackground-position: left bottom
bg-left-topbackground-position: left top
bg-rightbackground-position: right
bg-right-bottombackground-position: right bottom
bg-right-topbackground-position: right top

Usage

Set left-top position background image with HTML inline attribute style="..." and a CSS property background-image: url(...) to an element.

<!-- Example -->
<y class="bg-left-top ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set top position background image.

<!-- Example -->
<y class="bg-top ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set right-top position background image.

<!-- Example -->
<y class="bg-right-top ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set right position background image.

<!-- Example -->
<y class="bg-right ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set right bottom position background image.

<!-- Example -->
<y class="bg-right-bottom ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set bottom position background image.

<!-- Example -->
<y class="bg-bottom ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set left-bottom position background image.

<!-- Example -->
<y class="bg-left-bottom ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set left position background image.

<!-- Example -->
<y class="bg-left ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Set center position background image.

<!-- Example -->
<y class="bg-center ... bg-no-repeat ... h-32 w-64"
style="background-image:url(...)">
</y>

Variant

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