<div class="h300 bg-gray-lineargradient"></div>

	<div class="h300 bg-green-lineargradient"></div>

	<div class="h300 bg-blue-lineargradient"></div>

	<div class="h300 bg-green-gradient"></div>

	<div class="h300 bg-black-gradient-opacity"></div>

						

How to use

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

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

						

How to use

• Use .bg-image-holder wrapper and set a backgrount image to it.
• For overlay shadow over background use .bg-image class and wrap the contents inside the .overlay-content wrapper

	<div class="h300 text-center" data-parallax="scroll" data-image-src="img/elm/el1.jpg" style="background: transparent;">
		<h1 class="text-white pt50 mb-2">Demo Title</h1>
		<p class="text-white">Lorem ipsum dolor sit amet.</p>
	</div>


						

How to use

• This background parallax effect works using jquery Parallax.js plugin
• Make sure you define data-parallax and data-image-src attributes in the wrapper element
• For more options read the documentation carefully going into here

	<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 pt50 mb-2">Demo Title</h1>
			<p class="text-white">Lorem ipsum dolor sit amet.</p>
		</div>
	</div>

						

How to use

Different video background design.. Here’s how:

• Copy the code and change the example video source to yours