title: Transparent box CSS
body: <p>To clarify I photoshopped the desired result:</p>
  
  <p><img src="https://i.stack.imgur.com/kffI4.png" alt="enter image description here"></p>
  
  <p>I do want the background image to cover the entire screen and the text to be near the bottom.</p>
  
  <p>I want to have a transparent box so I can put text in it. I have looked it up online but I want the background to be fixed and scale to fit the background. Also I want the portion of the background image to be transparent while showing in the box, not the text in the box. Here is the code I have come up with so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="background"&gt; // I don't know if its even needed to include this
  &lt;div class="transbox"&gt;
              &lt;p&gt; Text here.
              &lt;/p&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>background.div {
      background: url(myimage.jpg) no-repeat center center fixed;
      webkit-background-size: cover;
      moz-background-size: cover;
      o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
      background-repeat: no-repeat;
      color: white;
      font-family: Helvetica;
  
      div.transbox {
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
  }
      div.transbox p {
      position: fixed;
      bottom: 0;
      width:100%;
      text-align: center;
      font-size: 65px;
     -webkit-text-stroke-width: 3px;
     -webkit-text-stroke-color: black;
     color: white;
  }
  </code></pre>