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 |
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |