title: Set parallax scrolling div with opacity
body: <p><a href="https://jsfiddle.net/James2038/1x9a2gxq/1/" rel="nofollow noreferrer">https://jsfiddle.net/James2038/1x9a2gxq/1/</a> </p>
  
  <p>As shown in the jsfiddle im trying to set opacity into the scrolling div so that the clouds underneath appear slightly. Have tried many ways (rgba, opacity, img - all using css.)  </p>
  
  <pre><code>body, html {
          height: 100%;
      }
  
      .parallax {
          background-color: white;
          background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg");
          height: 100%; 
          /* Create the parallax scrolling effect */
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
      }
  
      #parallax-curtain{
          height: 100%;
          background: rgb(255, 255, 255);
          background: rgba(255, 255, 255, .5); /*In rgba, the a has no effect*/
      }   
  
  
  &lt;body&gt;
  
  &lt;div class="parallax"&gt;&lt;/div&gt;
  
  &lt;div id="parallax-curtain"&gt;&lt;/div&gt;
  
  &lt;div class="parallax"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>