title: CSS: Element behind all sibling elements within a parent element
body: <p>I want to have a  inside of another  that will serve as a background to the container and sit behind all of the other elements inside of the container.  The HTML would be something like so:</p>
  
  <pre><code>&lt;div id='container'&gt;
      &lt;div&gt;Blah&lt;/div&gt;
      &lt;input type='text'/&gt;
      &lt;input type='submit'/&gt;
      &lt;div id='background'&gt;
          &lt;img.../&gt;
          Some Text Maybe?
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My failed CSS:</p>
  
  <pre><code>#background{
      float:left;
      z-index:-999;
      background-color:black;
      height:'+o.height+'px;
      width:'+o.width+'px;
  }
  </code></pre>
  
  <p>The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.</p>
  
  <p>Where I currently stand: My background sits below the sibling elements (along the y-axis not the z).  When I play around with the position property, it either places the element behind the parent or it has no effect.</p>
  
  <p>What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element.  I'm not even sure if what I'm trying to do with the CSS is possible.</p>