Cómo puedo establecer una posición fija Imagen de fondo en jquery mobile para la aplicación iPhone usando Phonegap

Estoy haciendo una aplicación para iPhone usando Phonegap & también usando jquery mobile. Quiero establecer una imagen de fondo para data-role = page div. En esta altura de la página es igual a la pantalla &, por lo tanto, el fondo se establece en el tamaño de la pantalla. Pero la longitud del contenido de la página es mucho mayor que la pantalla &, por lo tanto, el fondo gris se ve después de que se completa la imagen. Mi pregunta es si hay una manera para que podamos mantener la imagen de fondo fija & desplazarse o mover solo el contenido de la página & no la imagen de fondo. Solo por mencionar que he intentado full size background jquery pluggin. Está trabajando en Android, pero no en iOS.Cómo puedo establecer una posición fija Imagen de fondo en jquery mobile para la aplicación iPhone usando Phonegap

¿Alguien puede ayudarnos? Gracias por adelantado.

Fuente

2012-01-19 Sayali

Ok, entonces lo que hice fue crear un elemento fijo dentro del elemento del cuerpo de la página. para que se viera como

<body> 
    <div id="background"></div> 
    ... 
</body>

Y para el CSS que se indique lo siguiente:

#background { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important; 
    background-size:contain; 
}

Y esto lo hizo el truco para mí. Es de esperar que ayuda a (alguien por ahí: P)

Fuente

2012-08-18 22:59:22 Adrian

Esto funcionó para mí en Chrome, pero no en iOS. –

Está buscando css background-attachment la propiedad.

div[data-role="page"]{ 
    background-attachment: fixed; 
}

Actualización:
background-attachment:fixed está soportado desde iOS 5, si utilizando versión anterior de iOS puede considerar el uso de iScroll.

Fuente

2012-01-19 09:32:46

Gracias pero esto también no trabajar . – Sayali

Funciona a partir de iOS5, si utiliza la versión anterior de iOS WebKit versión utilizada por Safari no es compatible con 'background-attachment: fixed' –

Ya funciona en iOS 5. Quiero que funcione en iOS 4.2 o 4.3 – Sayali

Puede configurar la imagen de fondo a la página jQuery:

.ui-page { background-image:url(../ios/sample~ipad.png); 
background-repeat:no-repeat; background-position:center center; 
background-attachment:scroll; background-size:100% 100%; }

Fuente

2013-03-01 15:14:45 Manikandan

puede probar esto:

.ui-mobile 
.ui-page-active{ 

display:block; 
overflow:visible; 
overflow-x:hidden; 

}

funciona bien para mí.

Fuente

2014-04-11 16:37:01 JavaScripter

Pruebe con esto, este trabajo es para mí.

position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background: url(../Images/loginBackground.jpg) 0 0 fixed !important; 
background-size:100% 100%; 
background-repeat: no-repeat;

Fuente

2015-11-04 01:17:02

<body> 
    <div id="background"></div> 
    ... 
</body>

css:

#background { 
    background-image: url("/images/background.png"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background-position: 0 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

@media screen and (max-width: 480px) { 
    #background { 
     background-attachment: initial !important; 
    } 
}

El problema es que los dispositivos móviles iOS tener errores de representación simultánea background-size:cover; y background-attachment:fixed; así que hay que fijarlo por @media

Fuente

2017-05-16 12:59:54

Cómo puedo establecer una posición fija Imagen de fondo en jquery mobile para la aplicación iPhone usando Phonegap

Respuesta

Cuestiones relacionadas