# Image Backgrounds

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

###

Basic Usage

    <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

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>