title: section pushes background image out of view
body: <p><a href="https://i.stack.imgur.com/vVzbG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vVzbG.png" alt="enter image description here" /></a>I am building a fitness website the background images are perfect but when I add a height and width to the section beneath it the sections start to push the background image towards the top of the screen out of view. I want my image to be shown once the website loads and the user scrolls or clicks the link to visit each section of the website.
  here are the HTML and CSS</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     header {
        width: 100%;
        height: 100px;
        background-color: skyblue;
        display: flex;
        justify-content: space-between;
       }
      
        main {
         width: 100%;
         height: calc(100vh - 100px);
         background-image: url(../img/background-image.jpg);
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
       }
      
      #about {
        width: 100%;
        background-color: #111;
        padding: 3rem;
      
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;!--The start of main section--&gt;
      &lt;main id="home"&gt;
          &lt;div class="hero"&gt;
              &lt;h1 class="h1-hero"&gt;&lt;/h1&gt;
              &lt;p class="hero-intro"&gt;Follow your passion and reach your fitness goals.&lt;/p&gt;
              &lt;a class="join-today-btn"&gt;Join Today&lt;/a&gt;
          &lt;/div&gt;
      &lt;/main&gt; 
      &lt;!--The end of main section--&gt;
      
      &lt;!--The start of about section--&gt;
      &lt;section id="about"&gt;
      
      &lt;/section&gt;
      &lt;!--The  of about section--&gt;
      
      &lt;!--The start of service section--&gt;
      &lt;section id="service"&gt;
      
      &lt;/section&gt;
      &lt;!--The end of service section--&gt;
      
      &lt;!--The start of price section--&gt;
      &lt;section id="price"&gt;&lt;/section&gt;
      &lt;!--The end of service section--&gt;
      
      &lt;!--The start of contact section--&gt;
      &lt;section id="contact"&gt;&lt;/section&gt;
      &lt;!--The end of contact section--&gt;</code></pre>
  </div>
  </div>
  </p>