Overlay doesn't take full page

Question

I am working on a new page for my website, and i got a great image for the background, but i would like to use an overlay to make the image darker. But the overlay doesn't take the full page !

I have already tried a lot of things but nothing worked, and this is my html and css code :

 /* //////////////////////// [ Background ] //////////////////////// */ body, html { height: 100%; background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bg-img { background-image: url("../../images/background/bg.jpg"); display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .overlay { position: relative; z-index: 1; width: 100%; min-height: 100vh; } .overlay::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.8); } 

 <div class="bg-img"></div> <div class="overlay"></div> 

I think you understood what i would like. That's could be very nice if someone could help me to make this overlay on the full page.

Answer 1

Add margin: 0 to the body:

 body, html { height: 100%; background-color: #fff; box-sizing: border-box; } body { margin: 0; } .bg-img { background-image: url("https://picsum.photos/id/446/3200/3200"); display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .overlay { position: relative; z-index: 1; width: 100%; min-height: 100vh; } .overlay::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); } 

 <div class="bg-img"></div> <div class="overlay"></div>