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

<header id="header">
  <img id="header-img"
        alt="original trombones logo">
  <nav id="nav-bar">
        <a class="nav-link" href="#first">First plan</a>&nbsp;&nbsp;&nbsp;
        <a class="nav-link" href="#second">Second plan</a>&nbsp;&nbsp;&nbsp;
        <a class="nav-link" href="#third">Third plan</a>
<h1> <u>e<b>X</b>ample Tourism</u></h1><br><br><br>
<div id="vid">
<iframe id="video" width="860" height="515" src="" ></iframe>
<p id="first">plan is for 50$<p>
  <p id="second">plan is for 100$<p>
    <p id="third">plan is for 500$<p>
<form id="form" action="">
  <p>Email id:</p><input id="email"name="email" placeholder=""type="email">
  <input id="submit"type="submit"vale="SUBMIT">


body::before{ background: url(""); 
  background-size: cover; 
  display: block; 
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.4; } 

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.