Elements

Backgrounds


Single Image

				
HTML
<div class="-bg-image -bg1"></div>
				
CSS
/* Background 1 */ .-bg1 {     background-image: url('https://moonlight.coming-soon.demo.pixelthrone.info/assets/images/demo3/bg.jpg'); }

Video

				
HTML
<div class="-bg-video"      data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"      data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%"> </div> <!-- Add script in the footer --> <script src="./assets/js/vendor/jquery.vide.min.js"></script>

Image Slideshow

				
HTML
<div class="-bg-image -slideshow"      data-duration="3000"      data-fade="750"      data-images='[           "https://moonlight.coming-soon.demo.pixelthrone.info/assets/images/demo10/bg1.jpg"         , "https://moonlight.coming-soon.demo.pixelthrone.info/assets/images/demo10/bg2.jpg"         , "https://moonlight.coming-soon.demo.pixelthrone.info/assets/images/demo10/bg3.jpg"         , "https://moonlight.coming-soon.demo.pixelthrone.info/assets/images/demo10/bg4.jpg"         ]'></div> <!-- Add script in the footer --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>