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.

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