Backgrounds

The Background Utilities provide advanced control over color, gradients, repeating, positioning, sizing, origins, and attachments for backgrounds — fully compatible with both Bootstrap and your custom design system (light & dark modes).

All classes use the al- prefix and follow utility-first conventions.

Overview

Utility GroupClass FormatDescription
Bootstrap Colors.bg-{color}Bootstrap native colors
Both-Mode Colors.al-bg-{color}-bothCustom safe colors for both modes
Gradient Backgrounds.al-bg-{type}-{color}Linear, Radial, Conic gradients
Repeat.al-bg-repeat{type}Background repeating
Position.al-bg-position-{position}Positioning
Origin.al-bg-origin-{origin}Origin box
Size.al-bg-size-{size}Contain, cover, auto
Attachment.al-bg-attachment-{type}Fixed, local, scroll

Sass Reference

assets/scss/_backgrounds.scss Copy

Class Usage Reference

ClassOutput
.bg-primaryBootstrap color
.al-bg-primary-both$primary-dark
.al-bg-white-both#fff
.al-bg-black-both#000
.al-bg-linear-primaryLinear gradient
.al-bg-radial-whiteRadial gradient
.al-bg-conic-whiteConic gradient
.al-bg-repeat-noNo repeat
.al-bg-position-center-topCenter top
.al-bg-origin-paddingPadding box
.al-bg-size-coverCover size
.al-bg-attachment-fixedAttachment fixed

Examples

Solid Background (Both Mode)

Primary Dark (Both Mode - Dark / Light)
White (Both Mode - Dark / Light)
Black (Both Mode - Dark / Light)
Copy

Gradient Background

Linear Gradient

Primary
White

Radial Gradient

Primary
White

Conic Gradient

Primary
White
Copy

Background attachment

Fixed

Background Attachment Fixed

Control Scrolling Behavior of Background Images

The background-attachment utilities allow you to define how a background image behaves when scrolling the page or its container. These utilities are useful for creating fixed background effects, scrollable panels, or localized background scrolling within specific elements.

By adjusting the attachment type, you can keep the background stationary (fixed), let it scroll normally with the content (scroll), or limit its movement within the container (local). This provides additional control when building visually engaging layouts or parallax-like sections.

Local

Background Attachment Local

Control Scrolling Behavior of Background Images

The background-attachment utilities allow you to define how a background image behaves when scrolling the page or its container. These utilities are useful for creating fixed background effects, scrollable panels, or localized background scrolling within specific elements.

By adjusting the attachment type, you can keep the background stationary (fixed), let it scroll normally with the content (scroll), or limit its movement within the container (local). This provides additional control when building visually engaging layouts or parallax-like sections.

Scroll

Background Attachment Scroll

Control Scrolling Behavior of Background Images

The background-attachment utilities allow you to define how a background image behaves when scrolling the page or its container. These utilities are useful for creating fixed background effects, scrollable panels, or localized background scrolling within specific elements.

By adjusting the attachment type, you can keep the background stationary (fixed), let it scroll normally with the content (scroll), or limit its movement within the container (local). This provides additional control when building visually engaging layouts or parallax-like sections.

Copy

Background origin

Border

Padding

Content

Copy

Background Position

Right

Right Top

Right Bottom

Left

Left Top

Left Bottom

Center

Center Top

Center Right

Center Bottom

Center Left

Top

Bottom

Copy

Background repeat

Repeat

No-repeat

Repeat-x

Repeat-y

Copy

Background size

Contain

Cover

Auto

Copy

Developer Notes

  • Bootstrap native colors fully supported via .bg-{color} classes.

  • Your both-mode solid color layer uses .al-bg-{color}-both classes.

  • Gradient utilities provide linear, radial, and conic control.

  • Repeat, Position, Origin, Size, and Attachment are fully separated utilities for modular control.

  • Fully compatible with light and dark mode automatically.

  • Utilities generated via Sass nested structures for easy extension.

On this page

About

Overview

Sass Reference

Class Usage Reference

Examples

Developer Notes
Custom Cliping
Borders