title: I created a correlation between content-size and background-size. Why?
body: <p><strong>Hey Guys</strong>
  I am creating a website for class. I just added a small linear gradient to blend from the background-image to the background-color. The background is in defined in the :root so I used :root:before to add the gradient. On a page with enough content, everything works just fine. But on pages with less content, the background-image is small and grows with the quantity of content.
  I have no heccing idea why.</p>
  <p>The SCSS</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>:root {
     background: $background-color;
     /*Absolut verlinktes Bild*/
     background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
     background-repeat: no-repeat;
     background-size: contain;
  
     box-sizing: border-box;
     font-size: 1.1rem;
     font-family: Montserrat, sans-serif;
     scroll-behavior: smooth;
  }
  :root:before {
     content: "";
     position: absolute;
     bottom: -15%;
     width: 100%;
     height: 100px;
     background: linear-gradient(to top, $background-color, transparent);
  }</code></pre>
  </div>
  </div>
  </p>