Hello there, I'm currently working on making my website responsive and I've run into a problem with GIF images. No matter what I do, they just won't fill the entire page. When I try to make them smaller, it leaves white spaces at the top and bottom which is not what I want. I'm willing to sacrifice some quality in order to have the GIF fill the whole page but using object-fit: cover or fill doesn't seem to work.
.Background {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(248, 245, 245);
height: 100%;
width: 100%;
background-image: url('../../videos/gif.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
@media screen and (max-width: 35em) {
.Background {
height: auto;
}
}