Backgrounds

Background Size

Utilities for sets background size of a background image.

Class

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

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

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