samedi 9 mai 2015

Is it possible to stack a partially transparent png image on top of a fullscreen video (mp4) div background, using css?

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