title: How to remove css background transparent?
body: <p>I don't know how it has occurred and for the life of me, I cannot fix it.</p>
  
  <p>I have a div which is hidden using display: none;</p>
  
  <p>When a user clicks, I set display: block which shows a new layer.</p>
  
  <p>The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?</p>
  
  <p>I have set no transparency or opacity in my css.</p>
  
  <p>The layer I am showing only has the following settings:</p>
  
  <pre><code>.display { 
      background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
      display:none; 
      width: 250px; 
      height:100px; 
      border: 1px solid rgb(20, 20, 20);
      margin-left: -5px;
      margin-top: -100px;
      float: left;
      z-index: 999;
  
  }
  </code></pre>
  
  <p>As you can see:
   I've tried using a 1px background image - still transparent
   I've set the background color to white - still transparent
   I've tried setting the z-index so it is on top of everything - still transparent</p>
  
  <p>I don't know why it is and how i stop it???</p>
  
  <p>NOTE: I have deactivated the live site and this code can be viewed in testing at: <a href="http://dev.cutmyhair.com.au/search_results.php?keyword=waverley" rel="nofollow noreferrer">http://dev.cutmyhair.com.au/search_results.php?keyword=waverley</a> 
  NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)</p>