title: Foreground background colour solid while the image still being transparent
body: <p>I have a simple build of a parallax site and I am trying to layer one background image over another. The foreground image is basically the logo with a transparent cut out, and the cut out is the only part of the background image I want to be displayed on the screen. </p>
  
  <p>The rest of the first slide should be a solid colour.</p>
  
  <p>I want to do this so that it maintains the best quality of the foreground image as possible, scaling it as a % doesn't look half as good.</p>
  
  <p>The site is here for demo <a href="http://www.designandintention.com/Raikon/" rel="nofollow">http://www.designandintention.com/Raikon/</a></p>
  
  <p>HTML in question so far:</p>
  
  <pre><code>&lt;div align="center" class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".7"&gt;
  
  &lt;div align="center" id="menuwrapper"&gt;
  
  &lt;div align="center" id="slidemenu"&gt;
  &lt;div id="hrs"&gt;
  &lt;/div&gt;
  
  Raikon Property Development
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="slideforeground" data-stellar-ratio="0" data-stellar-vertical-offset="0"alt=""&gt;
  
  &lt;/div&gt;
  
  &lt;a class="button" data-slide="2" title=""&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;!--End Slide 1--&gt;
  
  
  CSS:
  
  .slide{
      background-attachment: fixed;
      width:100%;
      height:100%;
      position: relative;
      box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
  }
  .wrapper{
      width:960px;
      height:200px;
      margin:0 auto;
      position:relative;
  }
  .slideno{
      font-family: 'Lato', sans-serif;font-weight:400;
      position:absolute;
      bottom:0px;
      left:0px;
      font-size:100px;
      font-weight:bold;
      color:rgba(255,255,255,0.3);
  }
  #menuwrapper {
  width:90%;
  height:0px;
  }
  
  #slideforeground{
  background-image:url(../images/Foreground.png);
  background-repeat:no-repeat;
  background-position:center; 
  height:100%; 
  width:100%; 
  }
  
  /******************************
   SLIDE 1 
  *******************************/
  #slide1{
  
      background-color:#e3e8cf;
      background-image:url(../ribahighgate-dexigner-james.jpg);
      background-repeat: no-repeat;
      background-attachment:fixed;
      background-size:cover;
  }
  </code></pre>