Usando el fondo adjunto: arreglado en safari en el ipad

Estoy buscando recrear un efecto similar a la popular aplicación de ciencia. Básicamente tienen una gran imagen de fondo y luego tienen una capa HTML/CSS encima de eso. Cuando el usuario se desplaza por el contenido, la posición de fondo de la imagen debe permanecer en su lugar y no desplazarse.Usando el fondo adjunto: arreglado en safari en el ipad

Obviamente en un navegador 'regular' Me gustaría utilizar background-attachment: fixed, pero esto no parece funcionar en el IPAD. Sé que la posición: fija no funciona como cabría esperar de acuerdo con las especificaciones del safari, pero ¿hay alguna forma de lograrlo?

Fuente

2010-06-10 chris_bcn

duplicado Posible [imagen de fondo fijo con iOS7] de (http://stackoverflow.com/questions/20443574/fixed-background- image-with-ios7) –

Creo que se puede colocar la imagen de fondo en un div y establecer el índice z a aparecer detrás de otros contenidos. Después, puede usar javascript para corregir la posición del div que contiene la imagen de fondo.

Fuente

2011-08-05 05:12:02 Alexander

Safari móvil escala todo su sitio hasta su tamaño de ventana, incluida la imagen de fondo. Para conseguir el efecto correcto, utilice la propiedad -webkit-fondo-CSS tamaño de declarar el tamaño de su fondo:

-webkit-background-size: 2650px 1440px;

(sombrero de punta a comentarista Mac)

Fuente

2011-08-11 20:55:54 codewrangler

No funciona, lo probé en el iPad 1. –

Resolvió mi problema en IPad3 Retina/IOS8. Gracias –

Puede utilizar este código para hacer un fondo fijo capa para hackear este problema.

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: 100%; 
    background-image: url('xx.jpg'); 
    background-attachment: fixed; 
}

y poner en <div id="background_wrap"></div><body></body>

<body> 
<div id="background_wrap"></div> 
</body>

Fuente

2012-10-07 16:17:31 Angolao

solución de próxima en Css:

body { 
    background-image: url(../images/fundobola.jpg); 
    background-position: top center;background-repeat:no-repeat; 
    background-size: 1900px 1104px; 
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll; 
}

--- No utilice ---- (causa: desplazarse desactivar)

position: fixed

Resuelto en Ipad y iPhone

Fuente

2012-10-12 14:21:47

... pero '-moz-' es el prefijo Mozilla, no iPhone (= Webkit)? –

No funciona en absoluto. Además, ¿qué tiene que ver 'font-family: Arial;' y los márgenes en el cuerpo con la solución? – Rocco

Ampliando la respuesta de Anlai anterior, he encontrado que la solución estaba repitiendo mi imagen como se desplazaba en lugar de mantenerlo fijo. Si alguien más ha tenido este problema mi CSS para la Identificación background_wrap es el siguiente:

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: cover; 
    background-image: url('../images/compressed/background-mobile.png'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
}

acaba de cambiar el tamaño de fondo y el apego fondo para que la imagen estática.

Fuente

2015-01-13 09:39:46 lg365

No soy tan Profi uno, pero he resuelto este problema usin jQuery. Es muy sencillo) Aquí está el código:

\t jQuery(window).scroll(function(){ 
 
\t \t var fromtop = jQuery(window).scrollTop(); 
 
\t \t jQuery(" your element ").css({"background-position-y": fromtop+"px"}); 
 
\t });

Fuente

2017-01-25 21:34:25 John

Usando el fondo adjunto: arreglado en safari en el ipad

Respuesta

Cuestiones relacionadas