I'm trying to make a full width video cover for the header of a web but it keep bugging, What am I doing wrong?
this is part of my code:
<section id="home">
<video poster="assets/img/home-bg.png" autoplay="autoplay" loop="loop" id="bgvid">
<source src="assets/video/garage-video.mp4"" type="video/mp4"/>
<!-- <source src="assets/video/trailer.webm" type="video/webm"/> -->
</video>
<!-- HEADER LOGO & NAV -->
<div class="filtro">
<div class="logo">
<img src="assets/img/garage-logo-blanco.png" alt="logo garage">
</div>
This is the css:
section#home video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100vh;
width: 100%;
height: 100vh;
object-fit: cover;
z-index: 1;
}
.filtro {
z-index: 2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(40, 88, 162, .55);
}
here is the entire code:
https://github.com/Luisbtz/garage3.0
here is the demo where you can find the bug, (The extra right padding):
Aucun commentaire:
Enregistrer un commentaire