title: how to display a background-image under another background-image in CSS
body: <p>i'm trying to figure out how to display another background image under my first image. I'm pretty noob to HTML &amp; css and I'm trying to figure out some things but can't seem to find this. I know the picture is there because when I add a <code>&lt;p&gt;</code> between the section of the second background image, you can see a small piece of the picture (which is probably the height of the <code>&lt;p&gt;</code>-tag.). So I guess there's something wrong with my width &amp; height. However, I've tried to fill in the exact height &amp; width but this resulted in a very zoomed in picture. Maybe this has something to do with using the REM wrong? I have no idea, I guess this isn't so hard to do but I'm still failing to succeed. This is what I have so far. You won't see the pictures because they're local, I hope this doesn't matter? Thanks a lot for the help!</p>
  
  <p>Edit: just to be clear, there are 2 full-screen images (main.jpg &amp; kampvuur.jpg that needs to be displayed full screen, the other images are on top of the fullscreen background-images and are just used for design)
  <a href="https://imgur.com/a/5jeVh" rel="nofollow noreferrer">https://imgur.com/a/5jeVh</a></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>html{
    box-sizing: border-box;
    font-size: 62.5%;
    height: 100%;
  }
  
  *, *:before, *:after{
    box-sizing: inherit;
   margin: 0;
    padding: 0;
  }
  
  body{
    height: 100%;
  }
  
  .bg{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
  }
  
  .mainpage{
      background-image: url(../assets/img/main.jpg);
  }
  
  .mainpage-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20rem;
    height: 100%;
  }
  
  .title{
    background-image: url(../assets/img/tentacion-small.png);
    background-repeat: no-repeat;
    height: 10rem;
    width: 53.4rem;
    margin-bottom: 2rem;
  }
  
  .titlespan{
    visibility: hidden;
  }
  
  q{
    background-image: url(../assets/img/quote-sm.png);
    background-repeat: no-repeat;
    width: 63rem;
    height: 3.1rem;
  }
  
  .gif{
    background-image: url(../assets/img/arrowdown.gif);
    background-repeat: no-repeat;
    width: 10rem;
    height: 10rem;
  }
  
  .stars{
    background-image: url(../assets/img/kampvuur.jpg);
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;link rel="stylesheet" href="./css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  
      &lt;header class="bg mainpage"&gt;
        &lt;section class="mainpage-text"&gt;
          &lt;h1 class="title"&gt;&lt;span class="titlespan"&gt;tentacion&lt;/span&gt;&lt;/h1&gt;
          &lt;q&gt;&lt;span class="titlespan"&gt;quote&lt;/span&gt;&lt;/q&gt;
          &lt;div class="gif"&gt;&lt;/div&gt;
        &lt;/section&gt;
      &lt;/header&gt;
  
      &lt;main&gt;
        &lt;section class="bg stars"&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;/section&gt;
  
      &lt;/main&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>