Background image

These classes help you to attach an image to background of an element. Image can be set using inline css and background-image property.

You should apply .bg-img to your desire element. Then, you can modify the image behavior using following utility classes, or draw an overlay above it.

Class name Description
.bg-fixed background-attachment: fixed
.bg-repeat background-repeat: repeat
.bg-img-left background-position: left center
.bg-img-right background-position: right center

<div class="bg-img h-300px" style="background-image: url(path/to/img.jpg)"></div>


Add a alpha colored layer between your background-image and element text for better contrast.

Elements using a background image can be overlayed with a dark layer by adding the data attribute data-overlay="*", where * is a number between 1 and 9; 1 is lighter layer and 9 is darker layer.

Class name Description
.overlay Prepare element to accept overlay-* classes. You don't need this class if your element has .bg-img class.
.overlay-dark Overlay color would be rgba(0,0,0,.35)
.overlay-darker Overlay color would be rgba(0,0,0,.50)
.overlay-darkest Overlay color would be rgba(0,0,0,.70)
.overlay-light Overlay color would be rgba(255,255,255,.55)
.overlay-lighter Overlay color would be rgba(255,255,255,.70)
.overlay-lightest Overlay color would be rgba(255,255,255,.90)

A text over the image

<div class="bg-img h-300px" data-overlay="5" style="background-image: url(../assets/img/gallery/1.jpg)">
  <h3 class="center-vh text-white">A text over the image</h3>

You might also need to have a light overlay. For this purpose, use data-overlay-light instead of data-overlay.

A text over the image

<div class="bg-img h-300px" data-overlay-light="7" style="background-image: url(../assets/img/gallery/1.jpg)">
  <h3 class="center-vh text-dark">A text over the image</h3>