(fixed, overflow) CSS para móviles

[boli-sp]

Hola a todos!

Tengo un problema que he intentado de varias formas pero no he resuelto del todo. En una aplicación para Android (usando phonegap), quiero tener un fondo fijo que ocupe toda la pantalla y después un texto scrolleable.

Entonces mi estructura sería la siguiente:

Código HTML:

<div id="background">
      <img id="image" src="image.png" />
</div>
 
<div id="text_scrolleable">
    aquí un texto grande para poder hacer scroll
</div>
 

Donde background contiene la imagen; y el div text_scrolleable el texto.

La altura y el ancho de background y de image serían 100%, mientras que text_scrolleable tendría scroll.

Código CSS:

#background, #image
{
    height:100%;
    width:100%;
    position: absolute;
    z-index: -1;
}
 
#text_scrolleable
{
    width: 100%;
    height:100%;
    overflow: auto;
}
 

El efecto que produce es una imagen fija de fondo y el texto desplazándose, sin que el fondo se desplace con él, pero en un navegador móvil no funciona.

Como position:fixed y overflow:auto no funcionan en los exploradores móviles antiguos, no se como hacer esto... Mi teléfono tiene Android 2.1.

¿Alguna ayuda? Gracias de antemano!

[Karmac]

¿No es más fácil darle los estilos al body?

Código CSS:

body {
   background: url(imagen.png);
}
 

El scroll debería ponerse solo como una página normal, no tienes que hacer nada.
Saludos.

[boli-sp]

No me sirve, por eso hago lo de colocar un elemento img y tratar de modificarlo.

como tú dices, para conseguir lo que quiero tendría que ser así:

Código CSS:

body{
   background: url(bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
}
 

porque tiene que ocupar el 100% en ambos ejes, sin importar el tamaño de la imagen ni el aspecto de la pantalla.

gracias por tu colaboración