Elements - Background Media

Background Image


<div class="bg-image" data-bg-src="../assets/images/img-src.jpg">
	<div class="section-spacing-lg">
		
	</div>
</div>

Background Image - Parallax

View Example's Code


<div class="bg-image parallax" data-bg-src="../assets/images/img-src.jpg">
	<div class="section-spacing-lg">
		
	</div>
</div>

Background Image - Parallax, Dark Overlay

View Example's Code


<div class="bg-image parallax" data-bg-src="../assets/images/img-src.jpg">
	<div class="section-spacing-lg bg-black-50">
		
	</div>
</div>

Background Image - Parallax, Gradient Overlay

View Example's Code


<div class="bg-image parallax" data-bg-src="../assets/images/img-src.jpg">
	<div class="section-spacing-lg bg-gradient-1 bg-opacity-50">
		
	</div>
</div>

Background Video

View Example's Code


<div class="position-relative">
	<!-- BG Video -->
	<div class="bg-video">
		<video playsinline autoplay muted loop>
			<source src="../assets/images/startup-bg-video.mp4" type="video/mp4">
		</video>
	</div>
	<!-- end BG Video -->
	<div class="section-spacing-xl bg-gradient-5 bg-opacity-60">
		<div class="container">
			
		</div>
	</div>
</div>

Nuur