Adding a background

Add a covering image background to elements by using the .imagebg class in conjunction with a child .background-image-holder element.

The background image holder uses the CSS property 'background-size: cover' to ensure that the background is fitted to the parent element without stretching or skewing the image.

<div class="imagebg">
  <div class="background-image-holder">
    <img alt="background" src="img/my-image.jpg" />
  </div>
  <div class="container">
    content
  </div>
</div>
          

---

Tip: Use image backgrounds in conjunction with scrims and overlays for a better text readability experience.

Overlays

Overlays are useful for ensuring that text overlaying an image will remain readable.

Elements using an image background can be overlayed with a tint by adding the data attribute data-overlay="#". The strength of the tint can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light tint, 9 being a heavy tint.

<div class="imagebg" data-overlay="5">
  <div class="background-image-holder">
    <img alt="background" src="img/file.jpg" />
  </div>
  <div class="container">
    Content
  </div>
</div>
          

Scrims

Similar to overlays, scrims add a gradient tint to the bottom or top of an element to ensure that overlaying text remains readable — without tinting the entire image.

Elements using an image background can be scrimmed by adding the data attribute data-scrim-top="#" or data-scrim-bottom="#". The strength of the scrim can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light ting, 9 being a heavy scrim.

<div class="imagebg" data-scrim-bottom="5">
  <div class="background-image-holder">
    <img alt="background" src="img/file.jpg" />
  </div>
  <div class="container">
    Content
  </div>
</div>