Image Backgrounds

Transform any image into a background for it's parent div using this helpful class.

Basic Usage

Image 
<div>
  <img class="bg-image" src="..." alt="..." />
</div>
.bg-image

Apply to <img> to format as an image background

Note: Ensure the parent of the .bg-image element has position: relative;

Opacity

Image

Combine with opacity utilities to control the intensity of the background. This is useful for maintaining legibility of text over an image background. For more information on utilities see the Utilities section.

<div>
  <img class="bg-image" src="..." alt="..." class="opacity-50" />
</div>