Advertisement
Advertisement


What is the problem that comes next if I use the overlay Without position absolute and top left right bottom 0?


Question

What is the problem that comes next if I use the overlay Without position absolute and top left right bottom ; 0 ?

<div class="home">                                                       
  <div class="overlay"></div>
</div>
.home {
  background: url(../imgs/background/background1.webp) ;
  background-size:cover ;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.overlay {
  background-color: rgba (0, 0, 0,0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

I just used

.overlay {
  background: rgba (0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}

image here

The same result can be obtained now .

Source. W3schools How TO - Overlay

2020/09/01
0
0
9/1/2020 5:32:44 PM