Backgrounds

Background Position

Utilities for sets position of a background image.

Class

class	css
bg-top	background-position: top
bg-bottom	background-position: bottom
bg-center	background-position: center
bg-left	background-position: left
bg-left-bottom	background-position: left bottom
bg-left-top	background-position: left top
bg-right	background-position: right
bg-right-bottom	background-position: right bottom
bg-right-top	background-position: right top

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>

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

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