title: How to place background image behind page content?
body: <p>I've got a background image on my webpage. Now I want to add content that floats over it. The code below places the content behind the image. How to correct it?</p>
  
  <p>Note that I've borrowed (and I'm trying to get the effect) discussed in this link for background image:  <code>CSS-Only Technique #2</code> from: <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">http://css-tricks.com/perfect-full-page-background-image/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;  
      &lt;style type="text/css"&gt;
      &lt;!--
      #bg {
              position: fixed; 
              top: -50%; 
              left: -50%; 
              width: 200%; 
              height: 200%;
            }
            #bg img {
              position: absolute; 
              top: 0; 
              left: 0; 
              right: 0; 
              bottom: 0; 
              margin: auto; 
              min-width: 50%;
              min-height: 50%;
            }
       --&gt;
       &lt;/style&gt;      
  &lt;/head&gt; 
  &lt;body&gt;
  
      &lt;div id="bg"&gt;
          &lt;img src="myimage.jpg"&gt;
      &lt;/div&gt;
  
      &lt;div id="mycontent"&gt;
          ...
      &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>