Backgrounds

Background Attachment

Utilities for sets behaviour of background images when scrolling.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

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

Usage

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

<div class="bg-fixed ... width-56 height-24 ... overflow-y-scroll" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-fixed,
    .width-56,
    .height-24,
    .overflow-y-scroll;
}

SCSS

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

<div class="bg-local ... width-56 height-24 ... overflow-y-scroll" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-local,
    .width-56,
    .height-24,
    .overflow-y-scroll;
}

HTML

Set a scrollable background image in the browser viewport.

<div class="bg-scroll ... width-56 height-24 ... overflow-y-scroll" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-scroll,
    .width-56,
    .height-24,
    .overflow-y-scroll;
}

SCSS