title: CSS Background transparency with text fully visible
body: <p>I'm trying to achieve the effect where I have a transparent background color of a div (so that I can see the image in the back) and keep the main content of the website centred (even when resizing window).</p>
  
  <p>I wrote a quick mock up in JS fiddle to demonstrate what I am trying to do.  The problem that I am encountering is that when I set opacity to the root div, every child of the div gets that opacity and I cannot over write it.  I understand that the way I am doing it in the fiddle it doesn't work due to nothing being fixed, however how do I achieve having this effect and keeping the website centred when resizing?</p>
  
  <p>Can I do this without using JS?</p>
  
  <p>Last note, in the JS Fiddle, the text should be opacity 1 while the yellow should stay opacity 0.3</p>
  
  <p>Here is the JS Fiddle: <a href="http://jsfiddle.net/7d6NY/" rel="nofollow">http://jsfiddle.net/7d6NY/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQuK9zPKC8rFhpf1S9-2bGCaIUdm9-YMeQiBRdc5rRY_xiQTYvd" alt="image missing" class="bg-image" /&gt;
  &lt;div class="transparency"&gt;
      &lt;div class="content"&gt;
          THIS IS MY PAGE CONTENT
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .transparency{
      background-color: yellow;
      display: block;
      opacity: 0.3;
      margin: 0 auto;
      width: 300px;
      height: 500px;
  }
  .content{
      color: #000;
      opacity: 1;
      text-align: center;
  }
  img{
      /* Set rules to fill background */
      min-height: 100%;
      min-width: 1920px;
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
      /* Set up positioning */
      position: fixed;
      top: 0;
      left: 0;   
  }
  </code></pre>