Create Video Parallax Background Using CSS3

Video Parallax Background

What Do you think about Video Parallax Background? Yes, it is entirely possible to do with pure CSS3. Did you try Image background parallax scrolling? I am sure your answer is yes but what about parallax video using CSS3?

You might be thinking is it possible?

Yes, it’s possible to do, and today I am going to show you how to make that happen.

Parallax scrolling is a new way in computer graphics, where background images or video move by the camera slower than foreground images. It is the technique of depth in a 2D scene. There are many references about creating parallax scrolling Image background, but here I will share you how to build a parallax scrolling video background by using CSS3 purely.

This technique based on our previous article Fullscreen Video Background which modifies to make it possible for video parallax scrolling.

Now Let’s get started with Markup.

Video Parallax Background – Markup

We have added sections for image and content which I am also going to explain here. But wait, If you are looking for Javascript solution then you may check out this GitHub.So, Let’s have a look our first section which is about parallax image or background.

So, Let’s have a look our first section which is about parallax image or background.

What we did here to simply place a div class name ParallaxImage and you also notice another class bg1 which will have background image defined in CSS file. A child div container is used to align the content to a center of the page. Then finally we have h1 heading. Here you and place as much content as you want.

<div class="ParallaxImage bg1">
  <div class="container">
  <h1>Parallax Effect Video Background</h1>
  </div>
</div>

Our second section is for content area, and it’s so easy to implement. We place a div class name ParallaxContent to define it. Then next, we have a container which allows us to align the content center of the body.

<div class="ParallaxContent">
  <div class="container">
  <div class="headlines">
  <h2>Parallax Effect Video Design</h2>
  <p>Work on all major devices</p>
  </div>
  <h2>Lorem Ipsum Dolor</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Ok for video parallax section we have defined a div class name ParallaxVideo and place the HTML5 video tag inside. You can also add heading on that video, all you need to do to place the heading just right below the video tag.

<div class="ParallaxVideo">
  <video autoplay muted loop>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <h1>Video Background</h1>
</div>

Video Parallax Background Styling

Without CSS, the HTML is nothing so we are going to style our section to not only make them look good and also function as we want.

Background Image Section

First of all, we will take a look parallax image and we simply use background-attachment: fixed; element. You need to define background-position: 50% 50%; which will adjust the size of the background.

The property background-repeat: no-repeat; will not repeat the background. We are going to use background-size: cover; which make background responsive for all kind of device.

The heading h1 have few styles like font-weight, font-size, color, text-transform and text-align.

We have three different classes, each has the different background image. These are classes are bg1, bg2, and bg3. Now let’s have a look how the CSS style will look like:

.ParallaxImage {
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 50px;
  padding-top: 50px;
}
.ParallaxImage h1 {
  font-weight: 700;
  font-size: 76px;
  text-align: center;
  text-transform: uppercase;
  color:#FFF;
}
.bg1 {
  background-image: url("../images/paxallax1.jpg");
}
.bg2 {
  background-image: url("../images/paxallax2.jpg");
}
.bg3 {
  background-image: url("../images/paxallax3.jpg");
}

Simple Content Section

To style the content section, We don’t need to use a fixed thing. All we need to add background color and we used nice blue color for the background. Then we have added top and bottom padding 42px. We’re going to color the text to white.

.ParallaxContent {
  background: none repeat scroll 0 0 #2581e8;
  padding: 42px 0;
  color:#FFF;	
} 
.ParallaxContent h2{
	color:#FFF;	
}

Video Section

You need to apply some height and padding as per your need into class ParallaxVideo. Then video element inside ParallaxVideo div will be position: fixed; and top:0;. Remember that top:0; will show the video from the top of the page. You also need to use min-width: 100%; CSS element to make the full video width. The z-index property allows us to define the stack order.

Let’s have a look piece of CSS code:

.ParallaxVideo{ 
	height: 300px;
	padding-bottom: 50px;
  padding-top: 50px; 
}
.ParallaxVideo video{ 
  min-width: 100%;
  position: fixed;
	top:0;
	z-index: -999;
}
.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

There are few general styles included in the demo and download source. We have defined them separately in the cssparallax.css file.

This solution is fully responsive and works well on all kind of devices, but If you have any better idea about creating video parallax background, please share it in below comment section.

You May Also Like

5 Comments

    1. This video parallax background isn’t responsive that’s why it’s may not working on the mobile device. I will try to make or update current one so it works on all kind of devices. Thanks.

  1. Hello,
    You Code is very good but this demo video not working in windows PC safari browser 5.1.
    Thanks & Regards
    Praveen K Kalbi

Leave a Reply

Your email address will not be published. Required fields are marked *