Background

These modular elements can be readily used and customized in every layout across pages.

See the documentation
Image Background

Image Background

<div class="position-relative py-6 py-lg-8">
  <div class="bg-holder rounded-soft overlay overlay-0" style="background-image:url(../assets/img/gallery/2.jpg);"></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h4 class="text-white">Image Background</h4>
  </div>
</div>
Video Background

Video Background

<div class="position-relative">
  <div class="bg-holder rounded-soft" style="background-image:url(../assets/video/beach.jpg);"><video class="bg-video" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
      <source src="../assets/video/beach.mp4" type="video/mp4" />
      <source src="../assets/video/beach.webm" type="video/webm" /></video></div> <!--/.bg-holder-->
  <div class="position-relative vh-75 d-flex flex-center">
    <h4 class="text-white">Video Background</h4>
  </div>
</div>

Youtube Video Backgrounds

<div class="position-relative py-6 py-lg-8">
  <div class="bg-holder rounded" style="background-image:url(../assets/img/generic/5.jpg);">
    <div class="bg-youtube" data-property='{"videoURL":"https://www.youtube.com/watch?v=jfqQITaj9PQ","mute":true,"showYTLogo":false}'></div>
  </div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h4 class="text-white">Youtube Video Backgrounds</h4>
  </div>
</div>
Stylesheet
<link href="assets/lib/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.css" rel="stylesheet">
Javascript
<script src="assets/lib/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.js"></script>

Start building beautiful apps

Contact

369 ape view Avenue

Brooklyn, NY

369 ape view Avenue

Mon - Fri 9am - 5pm

+91 3929 3355

Brooklyn, NY

Subscribe

Latest Shape news, articles, and resources sent straight to your inbox every month.

We’ll never share your details. See our Privacy Policy

Made With by ThemeWagon