Background

Use background utilities to change the background color, background size and background pisition of an element.

Background Color

Background color utilities are classes for setting the value of the background-color property. You can preview the colors in the below gallery. When you pick up a background color class, consider the meaning in your context but not only the appearance, since in different themes background colors may be changed but the meanings are the same.

  <div class="bc-primary"></div>
  <div class="bc-secondary"></div>
  <div class="bc-danger"></div>
  <div class="bc-dark"></div>
  <div class="bc-light"></div>
  <div class="bc-emphasis"></div>
  <div class="bc-main"></div>
  <div class="bc-muted"></div>
  <div class="bc-inverse-emphasis"></div>
  <div class="bc-inverse-main"></div>
  <div class="bc-inverse-muted"></div>

The .bc-none class is a special background color utility, it sets the value of the background color property to transparent.

If you want to remove an element’s background images, you can use the .bi-none class.

Background Size

Background size utilities are classes for setting the value of the background-size property. If you’re not familiar with the background-size property, please read this tutorial at first.

You can preview how background size utilities affect the size of an element’s background in the below gallery.

<div class="bs-cover"></div>
<div class="bs-contain"></div>
<div class="bs-auto"></div>
<div class="bs-100-auto"></div>
<div class="bs-auto-100"></div>

Background Position

Background position utilities are classes for setting the value of the background-position property. They are named using the format: .bp-{horizontal position}{vertical position}.

We use the first letter of each position word for short, all position abbreviations are listed in the below table.

You can preview how they affect the position of an element’s background images in the below gallery.

<div class="bp-c">.bp-c</div>
<div class="bp-rc">.bp-rc</div>
<div class="bp-lc">.bp-lc</div>
<div class="bp-ct">.bp-ct</div>
<div class="bp-cb">.bp-cb</div>
<div class="bp-lt">.bp-lt</div>
<div class="bp-lb">.bp-lb</div>
<div class="bp-rt">.bp-rt</div>
<div class="bp-rb">.bp-rb</div>

Sass Variables

$background-color-primary: $color-primary !default

$background-color-secondary: lighten($color-secondary, 30%) !default

$background-color-danger: $color-danger !default

$background-color-dark: $color-dark !default

$background-color-light: $color-light !default

$background-color-muted: darken($background-color-light, 3%) !default

$background-color-emphasis: lighten($background-color-primary, 22%) !default

$background-color-main: $background-color-light !default

$background-color-inverse-emphasis: lighten($background-color-primary, 22%) !default

$background-color-inverse-main: $background-color-dark !default

$background-color-inverse-muted: lighten($background-color-dark, 3%) !default