title: How to make a div opaque?
body: <p>My smiley <code>div</code> has a <code>background color</code>, <code>z-index:999</code>, <code>opacity:1</code> to 1, however, you can still see the text through it :</p>
  
  <p>Result is : <img src="https://i.stack.imgur.com/HadlG.jpg" alt="it is RED, opaque, ABOVE text chat and ... it is still visible !"></p>
  
  <p>Relevant Code :</p>
  
  <pre><code>#smileyWindow {
      z-index: 999;
      width: 160px;
      height: 120px;
      border: 1px solid #999;
      background-color: #FFF;
      margin-top: -160px;
      margin-left: 50px;
      overflow-x: hidden;
      overflow-y: scroll;
  }
  
  
  &lt;div id="smileyWindow"&gt;
      &lt;img class='smileyImage' src='img/smileys/{D)}.gif'&gt;
      &lt;img class='smileyImage' src='img/smileys/{adios}.gif'&gt;
      &lt;img class='smileyImage' src='img/smileys/{angel}.gif'&gt;
      &lt;img class='smileyImage' src='img/smileys/{angry}.gif'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I make it opaque ?</p>
  
  <p>Look at <strong>hello world</strong> text, which is still visible behind the <code>#smileyWindow</code>.</p>
  
  <p>How is that possible ?</p>