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:

```
<div id='container'>
    <div>Blah</div>
    <input type='text'/>
    <input type='submit'/>
    <div id='background'>
        <img.../>
        Some Text Maybe?
    </div>
</div>

```

My failed CSS:

```
#background{
    float:left;
    z-index:-999;
    background-color:black;
    height:'+o.height+'px;
    width:'+o.width+'px;
}

```

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.

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.

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.