title: Make the image go behind the text and keep it in center using CSS
body: <p>I am creating a web page, where I have an image that I want to place in the center. On the top of that image I want to have input boxes, labels, and a submit button.</p>
  
  <p>I am trying to use this CSS</p>
  
  <pre><code>img.center
  {
      z-index:-1;
  }
  </code></pre>
  
  <p>but this does not work. When I change the code to</p>
  
  <pre><code>img.center
  {
      position:absolute;
      left:0px;
      top:0px;
      z-index:-1;
  }
  </code></pre>
  
  <p>it makes the image go behind. But then as I used <code>left:0px</code> and <code>top:0px</code> ... it puts the image at location 0,0. But I want the image to stay in the center.</p>
  
  <p>To keep the image in the center, I have added this: <code>&lt;div align="center"&gt;</code>.</p>
  
  <p>Is there any way, I can keep the image in the center and make it go behind the boxes, labes, and buttons too?</p>
  
  <p>My HTML page looks like this (I tried to have a background image for my div tag, but no image is appearing on top of it):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Question of the Week&lt;/title&gt;
  &lt;style type="text/css"&gt;
      body
      {
          background-image:url('images/background.jpg');
          background-repeat:repeat-x;
      }
  
      .container
      {
      background-image:url('images/center.jpg');
      background-repeat:no-repeat;
      }
      td.cntr {padding-top:50px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"&gt;
  
      &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
          &lt;tr&gt;
              &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;div align="left"&gt;&lt;img src="images/logo.jpg"&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div align="right"&gt;&lt;img src="images/right_logo.jpg"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;table width="100%" border="0" cellpadding="0" cellspacing="0"&gt;
                  &lt;tr&gt;
                      &lt;td class="cntr"&gt;
                          &lt;div id="container"&gt;
                              &lt;input name="box" type="textbox" /&gt;
                              &lt;input name="box" type="textbox" /&gt;
                              &lt;input name="submit" type="submit" /&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>