Parallax is an amazing effect which is wildly used, we can even find entire websites developed based on this feature.Here we are going to see how it can be used on your website’s header for background image and video only with CSS3 and HTML5, no JavaScript involved. If using Internet Explorer I recommend the version 11 to make sure you see the effect working.
Background Image With Parallax Using CSS3
First lets see how we can apply this effect using an image.
HTML
<section class="parallax-container">
<div class="parallax-img"></div>
<div class="header-content">
<h1>My Title</h1>
<p>Some text...</p>
</div>
</section>
<section class="content">
Page content...
</section>The .header-content element is only there if you want to add a title and some text over the image.
CSS
html {
overflow: hidden
}
html, body{
height: 100%
}
body{
overflow: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
-moz-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d
}
.parallax-container{
/* Define the height of the container
where the image will be */
height:400px
}
.parallax-img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image:url('background-img.jpg');
background-position: center top;
background-size: cover;
-webkit-transform: translateZ(-1px) scale(2);
-moz-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index: -99
}The image will cover the entire page and will adapt to the size of the viewport, so remember to use CSS media queries in order to display an appropriate image.
This will give a visually amazing effect to your Hero Image.
Video Background With Parallax Using HTML5 & CSS3
This effect will work only on browsers that support the HTML5 <video> element.
HTML
<section class="parallax-container">
<video loop muted autoplay>
<source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">
<source src="my-video.ogv" type="video/ogv">
</video>
<div class="header-content">
<h1>My Title</h1>
<p>Some text...</p>
</div>
</section>
<section class="content">
Page content...
</section>This will display and automatically play the video in a loop without sound.
CSS
Use the same CSS style from the previous example but just remove .parallax-img and add the following CSS:
video{
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(-1px) scale(2);
-moz-transform: translateX(-50%) translateY(-50%) translateZ(-1px) scale(2);
transform: translateX(-50%) translateY(-50%) translateZ(-1px) scale(2);
z-index: -99
}That’s all you need to do. Make sure to like and share this tutorial. Please leave a comment if you think this can be improved.
Hi, First of thank you for sharing such a nice tutorial. I am trying to implement your solution on my website but i am not able to add video and photo parallax section on same page.
Can we do add both video and image on same page? I just found another example here https://codeconvey.com/video-parallax-ba… and i want to achieve something similar to this one. Can you please help me? Thanks.
Hi Farukh, Have you tried adding the two sections, the one for the image and the one for the video? I haven't tried but it should work. Try something like that:
And with all the CSS.
Great article. I am running into a problem using a Bigcommerce theme that also uses section tags. I was curious to see if you can help out.
Kind Regards.