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.

possible duplicate about overlay on a background-image https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image/36679903#36679903 it will greatly simplify the way to do this and drop the ::before or ::after pseudoclass — G-Cyrillus, May 23 '19 at 19:59

Ori Drori · Accepted Answer · 2019-05-23T20:00:40.127

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>

Ok, i am sorry for this question... I tried everything but not this ... Thanks a lot. — Sami Lafrance, May 23 '19 at 20:00

Overlay doesn't take full page

1 Answers1