Background image does not fill whole page when resizes

Question

Hello I am applying RWD to my website. I have a problem because GIF does not want to fill whole page. When I make it smaller it leaves white spaces on the top and on the bottom. I would like to make him fill whole page I do not care about quality. Object-fit: cover / fill does not 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;
        
    }
}

score 1 · Answer 1 · answered Jan 26 '22 at 21:55

Change in you Background class the height from 100% to 100vh;

.Background {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(248, 245, 245);
    height: 100vh;
    width: 100%;
    background-image: url('https://via.placeholder.com/500/green');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}



@media  screen and  (max-width: 35em)  { 
    .Background {
        height: auto;
        
    }
}

<div class="Background"></div>

Background image does not fill whole page when resizes

1 Answers1