Background

Add color to elements and modify backgrounds with our background utilities!
Bootstrap Defaults
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
The default Bootstrap background utilities are contextual by nature, and pull from the color palette defined in the ../variables/_colors.scss file.
Expanded Color System
.bg-red
.bg-orange
.bg-yellow
.bg-green
.bg-teal
.bg-cyan
.bg-blue
.bg-indigo
.bg-purple
.bg-pink
SB Admin Pro adds non-contextual colors to the color map so they can be used in the same way you would use Bootstrap colors. These colors are also defined in the color ../variables/_colors.scss file.
Custom Gradient Background
.bg-gradient-primary-to-secondary
The custom gradient background is being used in the page headers, and can be applied anywhere you would use a normal background color utility.
Adaptive Grayscale
.bg-white
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-black

The adaptive grayscale is a custom feature in SB Admin Pro. The grayscale is formed by setting a value to the $grayscale-base-hue variable in the ../variables/_colors.scss file. The base hue, set to blue by default, is then blended with a true black and white grayscale to make a slightly tinted grayscale that is used throughout the theme.

You can use the above utilty classes as background colors for your elements, and you can modify the adaptive grayscale within the ../variables/_colors.scss file.

Background Image Utilities
Background Image (Cover):
.bg-img-cover(style='background-image: url("path/to/image")')
    | ...
Use the .bg-img-cover utility along with a background image set using inline CSS and the background image will cover the element it is used on.
Background Image (Repeat):
.bg-img-repeat(style='background-image: url("path/to/pattern")')
    | ...
Use the .bg-img-repeat utility along with a background pattern set using inline CSS and the background image will repeat across the element it is used on. Use a background color utility along with it to add a background color to accompany the pattern.
Background Overlay Utility
.bg-img-cover.overlay(style='background-image: url("path/to/image")')
    | ...
Use the .overlay utility along with a background image to add an overlay to an element. The default overlay adds a 50% dark overlay to the element. There are color and opacity options available as well.
Overlay Opacity
.overlay-10
.overlay-20
.overlay-30
.overlay-40
.overlay-50
.overlay-60
.overlay-70
.overlay-80
.overlay-90
//- 10% Overlay
.bg-img-cover.overlay.overlay-10(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 20% Overlay
.bg-img-cover.overlay.overlay-20(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 30% Overlay
.bg-img-cover.overlay.overlay-30(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 40% Overlay
.bg-img-cover.overlay.overlay-40(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 50% Overlay
.bg-img-cover.overlay.overlay-50(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 60% Overlay
.bg-img-cover.overlay.overlay-60(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 70% Overlay
.bg-img-cover.overlay.overlay-70(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 80% Overlay
.bg-img-cover.overlay.overlay-80(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- 90% Overlay
.bg-img-cover.overlay.overlay-90(style='background-image: url("path/to/image")')
    .z-1
        | ...
Use the .overlay utility along with an opacity utility, 10-90, to change the opacity of the overlay.
Overlay Colors
.overlay-primary
.overlay-secondary
.overlay-success
.overlay-info
.overlay-warning
.overlay-danger
//- Primary Overlay
.bg-img-cover.overlay.overlay-primary(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Secondary Overlay
.bg-img-cover.overlay.overlay-secondary(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Success Overlay
.bg-img-cover.overlay.overlay-success(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Info Overlay
.bg-img-cover.overlay.overlay-info(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Warning Overlay
.bg-img-cover.overlay.overlay-warning(style='background-image: url("path/to/image")')
    .z-1
        | ...

//- Danger Overlay
.bg-img-cover.overlay.overlay-dagner(style='background-image: url("path/to/image")')
    .z-1
        | ...
Use the .overlay utility along with an overlay color utility, for example, .overlay-primary . You can also use overlay colors that are part of the extended color system, like .overlay-red .
Combining Overlay Utilities
.bg-img-cover.overlay.overlay-70.overlay-primary(style='background-image: url("path/to/image")')
    | ...
The overlay opacity and overlay color utilities can be used together. In the above example, we use the .overlay utility with .overlay-70 and .overlay-primary .