Elements

These modular elements can be readily used and customized across pages and in different blocks.

    
      <div class="h300 bg-image-holder" style="background-image: url('path/to/img..');"></div>

      <!-- background image with content -->
      <div class="h300 bg-image text-center" style="background-image: url('path/to/img..');">
        <h1 class="text-white pt-5 mb-2">Demo Title</h1>
        <p class="text-white">Lorem ipsum dolor sit amet.</p>
      </div>

      <!-- Background fixed with opacity -->
      <div class="h300 bg-image bg-fixed text-center" style="background-image: url('path/to/img..');">
        <div class="overlay-content">
          <h1 class="text-white pt-5 mb-2">Demo Title</h1>
          <p class="text-white">Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

Background Image

Background fixed with opacity

Demo Title

Lorem ipsum dolor sit amet.

    
      <div class="bg-video">
        <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>

        <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
        <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
        </video>
        <div class="overlay-content text-center">
          <h1 class="text-white pt-5 mb-2">Demo Title</h1>
          <p class="text-white">Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

Demo Title

Lorem ipsum dolor sit amet.