Background image

Apply data-bg=”images/bg1.jpg” attribute on an element with your image path to apply a background image

<!--
=================================
= Background holder
=================================
-->
<div class="bg-holder full-wh z1">
 <!-- Overlay -->
 <b data-bgholder="overlay" class="full-wh z5" data-bgcolor="rgba(45, 51, 69, 0)"></b>
 <!-- Background image -->
 <b data-bgholder="bg-img" data-bg="images/bg10.png" class="full-wh bg-cover bg-cc z1"></b>
</div>

Use helper classes .bg-cc, .bg-cover to adjust background image on an element.

Background gradient color

Apply data-gradient=”y” and data-g-colors=”rgba(0,0,0,0)|rgba(13, 29, 125, 0.7)” attribute. Apply two background colors with “|” separator.

<b data-gradient="y" data-g-colors="rgba(0,0,0,0)|rgba(13, 29, 125, 0.7)" class="full-wh"></b>

Parallax background image

Apply attribute data-bgholder=”parallax” and set image path in data-parallax-img=”images/bg-img-01.jpg” to apply parallax image.

<!--
=================================
= Background holder
=================================
-->
<div class="bg-holder full-wh z1">
 <!-- Overlay -->
 <b data-bgholder="overlay" class="full-wh z5" data-bgcolor="rgba(45, 51, 69, 0.2)"></b>
   
 <!-- Parallax image -->
 <div data-bgholder="parallax" class="full-wh z2" data-parallax-img="images/bg21.jpg"></div>
 
 <!-- Background image -->
 <b data-bgholder="bg-img" data-bg="" class="full-wh bg-cover bg-cc z1"></b>
</div>

Please note parallax image only apply to a transparent element.