title: CSS - How to properly add 3 images in 3 layers
body: <p>I have three layers of images. ( <a href="https://jsfiddle.net/zaqu4qja/1/" rel="nofollow noreferrer">https://jsfiddle.net/zaqu4qja/1/</a> )</p>
  
  <p>The main problem is that the mountains should be fixed on the bottom but they are floating over the page depending on the screen size. </p>
  
  <p>The second problem is that I'm not the best with css and I would appreciate any advise to improve the css code. </p>
  
  <p>The regarding code for the mountains: </p>
  
  <pre><code>#foreground-mountains {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  background-size: cover;
  width: 100vw;
  background: url("/img/multiplikationsdreiecke/Vordergrund-Berge.png") no-repeat;
  }
  
  @media only screen and (min-width: 1024px) {
  #foreground-mountains {
  width: 100%;
  height: 250px;
     }
  }
  </code></pre>