I am using the following css method to deploy a fullscreen background video to my homepage that takes up the entire viewport. I would like to lay a transparent repeating (tiling) static .png background image over the top of the video. Is this possible?
<video autoplay loop poster="videobg.jpg" id="bgvid">
<source src="video.webm" type="video/webm">
<source src="videobg/videobg.mp4" type="video/mp4">
</video>
The CSS:
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(videobg.jpg) no-repeat;
background-size: cover;
}
Aucun commentaire:
Enregistrer un commentaire