Utilities - Background

Background Colors

Easily set the background of an element to any contextual class as shown below:

.bg-lighten

.bg-white

.bg-primary

.bg-light

.bg-secondary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-dark

                  <div class="bg-lighten"></div>
                  <div class="bg-white"></div>
                  <div class="bg-primary"></div>
                  <div class="bg-light"></div>
                  <div class="bg-secondary"></div>
                  <div class="bg-success"></div>
                  <div class="bg-info"></div>
                  <div class="bg-warning"></div>
                  <div class="bg-danger"></div>
                  <div class="bg-dark"></div>

Background Image Classes

Assign background image style values to an element with shorthand classes with the format bgi-{property}.

Where propertyis one of:

no-repeatto set background-repeat: no-repeat
position-y-topto set background-position-y: top
position-y-bottomto set background-position-y: bottom
position-y-centerto set background-position-y: center
position-x-startto set background-position-x: left
position-x-endto set background-position-x: right
position-x-centerto set background-position-x: center
position-bottomto set background-position: 0 bottom
position-centerto set background-position: center

                  <div style="background-image: url(image.png)" class="bgi-no-repeat bgi-position-center"></div>

Background Image Size Classes

Use responsive-friendly background image size style values for an element with shorthand classes with the format .bgi-size-{breakpoint}-{property}. The classes are named using the format .bgi-size-{property}for xsand .bgi-size-{breakpoint}-{property}for sm, md, lg, xl, and xxl.

Where propertyis one of:

autoto set background-size: auto
coverto set background-size: cover
containto set background-size: contain

                  <div style="background-image: url(image.png)" class="bgi-size-contain bgi-size-lg-auto bgi-no-repeat bgi-position-center"></div>