My background image is not applied to the whole page why?

1 
<p style ="text-align:center;">grate many things</p>

<iframe width="480" height="520" src="https://www.youtube.com/embed/PkZNo7MFNFg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<p>g
  g<br>
  g<br>
  <br>
  g<br>
  g<br>
  g<br>
  <br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  <br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  <br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br>
  g<br><br>
  g<br>
  g<br>
  g<br>
  g<br>
  gg<br>
  g<br>
  g<br>
  g<br>
  g<br>
  gg<br>
  g<br>
  g<br>
  g<br>
</p>

body::before{ background: url("https://static.toiimg.com/thumb/72975551.cms?width=680&height=512&imgsize=881753"); 
  background-size: cover; 
  content:""; 
  display: block; 
  position: absolute;
  top: 0; left: 0;bottom:0; width: 100%; height: 100%; z-index: -2; opacity: 0.4; }
2

Your CSS code declarations conflict with each other. The code you included to changed the opacity of the background will not work with background-size: cover. Try this workaround

Add the following line to your HTML (don’t worry about the picture popping up. The CSS code will handle it).

<img src="https://static.toiimg.com/thumb/72975551.cms?width=680&height=512&imgsize=881753">

Replace your CSS with this…

img {
  position: fixed; 
  top: 0; 
  left: 0;
  z-index: -2;
  opacity: .4;
  min-width: 100%;
  min-height: 100%;
}
3

i only changed the position from absolute to fixed and it worked.Thanks