Estoy tratando de agregar una imagen de fondo fija de pantalla completa a la primera página solo de una aplicación móvil jquery para Android (también estoy usando phonegap).

En pocas palabras, me gustaría que la imagen de fondo sea de pantalla completa y fija, mientras que el contenido de la página se desplaza por encima. La imagen de fondo también debe ajustarse al tamaño de diferentes dispositivos.

Aquí es lo que tengo hasta ahora ...

<div data-role="page" id="unit-list" data-theme="a"> 

<div id="background">

<div data-role="header" data-theme="b">
    <h1>Header</h1>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <ul data-role="listview" data-theme="none">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

</div><!-- /content -->

</div><!-- /background -->

 </div> <!-- /page -->

Con este CSS:

#background {
    background: url(../images/background.png);
    width: 100% !important;
    height: auto !important;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

Obviamente, esto no funciona, por lo que agradecería cualquier empujón en la dirección correcta, gracias de antemano.