estoy tratando de hacer una section de una página que tiene como fondo un video, y por encima del video, una imagen en png.
No logro dar con la forma correcta de hacerlo.
Este es el código:
#background-video {
background-size: cover;
background-repeat: no-repeat;
height: 100%;
z-index: -1000;
position: relative;
bottom: 0;
min-width: 100%;
}
.background-video-image {
max-height: 100%;
background-size: cover;
z-index: -999;
position: absolute;
bottom: 0;
background-image: url('../images/backgrounds/video-bckg.png');
color: #f1f1f1;
width: 100%;
padding: 20px;
height: 100%;
}
<section class="">
<div class="background-video-image">
</div>
<video autoplay muted loop id="background-video">
<source src="assets/videos/corto.mp4" type="video/mp4">
</video>
</section>
Esto es todo lo que tengo por ahora, pero no funciona como debería funcionar. Tanto el video como la imagen deben cubrir el 100% del width, y respecto al height, también en un 100% de lo que se estaría viendo en pantalla.
Luego la idea es aplicar otras imágenes, textos y botones a este fondo, pero eso es para otra ocasión.
Por el memento, logro que el video logre ocupar el 100% del ancho y el alto, pero al aplicar la imagen, esta no llega a cubrir a todo el video, me queda una parte abajo del video sin cubrir.
Aclaraciones:
• Estoy usando bootstrap 4, pero creo que no hay clases de bootstrap que esté utilizando en esta parte del código.
• Esta es otra parte del css que estoy usando:
html, body {
min-height: 100%;
min-width: 100%;
height: 100%;
margin: 0;
padding: 0;
}