title: Fullscreen background with fixed position above the body and below the content
body: <p>I am attaching the 2 sample images I am using so you can get the idea. </p>
  
  <hr>
  
  <p>This is the body background:
  <img src="https://i.imgur.com/cji4OHQ.jpg" alt="backgroundimage"></p>
  
  <hr>
  
  <p>This is the fixed position div's background: 
  <img src="https://i.imgur.com/WPbKf18.png" alt="backgroundimage"></p>
  
  <p>And above those two there is the content. The whole website. Between those two there are some moving stars in pure css with no interaction. </p>
  
  <p>But here comes the problem. While the user scrolls the fixed background breaks in parts, stucks in positioning and sometimes the body background image disappears and shows only color in the back - all that while scrolling. </p>
  
  <pre><code>body {
     font-family: 'LatoRegular', 'Lucida Grande', Helvetica, sans-serif !important;
     line-height: 21px;
     color: #636e7b;
     overflow: hidden; /*removes it after preloader quits*/
     position: relative;
     background: #1d2939 url("../images/backgroundv2.jpg") fixed;
     background-repeat: no-repeat;
     background-size: 100% auto;
     background-position: center top;
  }
  
  #fix {
      background: transparent url("../images/backgroundv2.png") fixed;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center top;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      -webkit-transform: translateZ(0);
  }
  </code></pre>
  
  <p>Any idea will be appreciated.</p>
  
  <p>(This is the bugged version <a href="https://i.imgur.com/bn0fG3j.jpg" rel="nofollow noreferrer">http://i.imgur.com/bn0fG3j.jpg</a> while scrolling)</p>