Backgrounds

Background Attachment

Utilities for sets behaviour of background images when scrolling.

Class

class	css
bg-fixed	background-attachment: fixed
bg-local	background-attachment: local
bg-scroll	background-attachment: scroll

Set fixed background image with HTML inline attribute style="..." and a CSS property background-image: url(...) to an element.

<!-- Example -->
<y class="bg-fixed ... w-56 h-24 overflow-y-scroll"
   style="background-image:url(...)"></y>

Set a scrollable background image in the browser viewport and the element container.

<!-- Example -->
<y class="bg-local ... w-56 h-24 overflow-y-scroll"
   style="background-image:url(...)"></y>

Set a scrollable background image in the browser viewport.

<!-- Example -->
<y class="bg-scroll ... w-56 h-24 overflow-y-scroll"
   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.