Backgrounds
Background Size
Utilities for sets background size of a background image.
Class
class | css |
---|---|
bg-auto | background-size: auto |
bg-cover | background-size: cover |
bg-contain | background-size: contain |
Usage
Set default background image size with HTML inline attribute style="..."
and a CSS property background-image: url(...)
to an element.
<!-- Example -->
<y class="bg-auto ... bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)"></y>
Set cropped and stretched background image to an element.
<!-- Example -->
<y class="bg-cover ... bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)"></y>
Set background image contains an element with cropped and stretched.
<!-- Example -->
<y class="bg-contain ... bg-center bg-no-repeat ... h-48 w-full"
style="background-image:url(...)"></y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |