Background

Background utilities to easily change background sizing, position, and color properties.

Sizing

• .bg-cover - sets the background image position to cover and centers it.
• .bg-h-100 - sets the background image size to auto 100% and centers it.

Positioning

• .bg-start - sets the background image positioning to center left.

Clip

• .bg-clip-content changes the background clip property to content-box.

Images

• .bg-pattern - adds a semi-transparent background pattern image and repeats it to fit the whole available space.

Colors

• .bg-white-90 - sets the background color to $white with 10% opacity.
• .bg-dark-5 - sets the background color to $dark with 95% opacity.
• .bg-dark-10 - sets the background color to $dark with 90% opacity.
• .bg-dark-20 - sets the background color to $dark with 80% opacity.
• .bg-dark-40 - sets the background color to $dark with 60% opacity.
• .bg-{$color}-soft - changes the background color to the soft variation of the specified theme color. E.g. .bg-primary-soft.

None

• .bg-none - removes the background color.