Background customization

Background Image

Set data-bg=”images/bg1.jpg” attribute to apply background image on any section. Below is example of code.

<!-- Intro -->
<section class="intro-section intro-section-1" data-bg="images/bg10.png">
...
</section>

Main CSS file include few utility classes to manage background images.

  • bg-fixed : Apply background position fixed on container with no repeat
  • bg-cover : Apply background size cover with no repeat
  • bg-contain : Apply background size contain with no repeat
  • bg-cc : Apply background alignment center center
  • bg-ct : Apply background alignment center top
  • bg-cb : Apply background alignment center bottom
  • bg-lt : Apply background alignment left top
  • bg-lc : Apply background alignment left center
  • bg-lb : Apply background alignment left bottom
  • bg-rt : Apply background alignment right top
  • bg-rc : Apply background alignment right center
  • bg-rb : Apply background alignment right bottom
  • bg-gray & bg-gray1 : Apply gray background on section

 

Gradient Background

<section>
	...
	<div class="full-wh" data-gradient="y" data-g-colors="rgba(0, 0, 0, 0.6)|rgba(0, 0, 0, 0.8)"></div>
</section>

Apply data-gradient=”y” to set gradient background on section then apply color codes in data-g-colors=”rgba(0, 0, 0, 0.6)|rgba(0, 0, 0, 0.8)” as display in above code example

 

 

Related Articles