Discover the art of background video with overlay. Enhance your website's visual appeal and engage visitors with stunning multimedia experiences.
HTML Code
<div class="container">
<video class="background-video" autoplay muted loop>
<source src="https://cdn.pixabay.com/video/2018/01/30/14025-254146871_large.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="overlay">
Overlay Content Here
</div>
</div>
CSS3 Code
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://cdn.pixabay.com/photo/2016/10/21/20/45/texture-1759179_1280.jpg') no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
color: white;
font-size: 2rem;
opacity: 0.3;
}
