It’s easy to layer test and images on top of a video using CSS with a few simple steps
In this video, I’m picking up where I left off with the last video, where I explained how to set a video as a background graphic in your HTML file using CSS. Here I build upon that same file by just altering a little of the code. Below is the same file I worked on if you would like to use that as an example to get started from.
This example I use the intro video I built in After Effect for Cactopia.com. Using the code form the last project, you need to set your background videos ‘z-index’ to something low, like a negative number. In the video I use -1. With the other items being on a higher layer by default, the video goes to the back and the text and button I set up come to the front.
Whats important to note is the video needs to also have another CSS property added to it called ‘position’. This position needs to be set to either Absolute or Fixed to work properly. Here is the final code I used to make the video style for the background video work:
video#bgvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url(bg.png) no-repeat;
background-size: cover;
z-index:-1;
}If you want to play around with these files yourself, here is a link to download them.
Please feel free to comment and ask questions below and I will respond as quickly as I can.