Background

CSS class that turns any <img> or <div> into a background for the parent element

Images

Apply to img to set image as the background for the parent element.

Image Description

Lorem ipsum dolor sit amet

Ensure the parent element has the position:relative; property set, as the background images feature uses absolute positioning.

Overlay

Use background and opacity utilities to turn an image into a background and overlay text.

Image Description

Lorem ipsum dolor sit amet

Classes

Class Description
.bg-fluid Apply to <img> to responsive images automatically adjust to fit the size of the screen.
.bg-image Apply to <img> to turn an image into a background for the parent element.
.bg-holder Apply to <div> to turn an image into a background for the parent element.

The classes are named using the format:

  • .bg-{value} for xs
  • .bg-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • fluid
  • image