Backgrounds

Background Size

Utilities for sets background size of a background image.


Class

classcss
bg-autobackground-size: auto
bg-coverbackground-size: cover
bg-containbackground-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

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