Imagen de fondo fija con ios7

Tengo un proyecto en el que estoy usando la imagen de fondo fija. Funciona muy bien en todo excepto en iOS7. En el iPad, la imagen de fondo se acerca y borrosa. Aquí está el código CSS que estoy usando –

.header { display: table; height: 100%; width: 100%; position: relative; color: #fff; background: url(../images/boston2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

aquí hay un enlace a la página en vivo – www.wdeanmedical.com

¿Qué me estoy perdiendo?

Usar background-attachment: fixed con background-size: cover causa problemas en la mayoría de los navegadores móviles (como has visto). Puede intentar usar background-attachment: scroll . Esto no dará el efecto deseado, pero verás las imágenes al menos. Puede usar una consulta de medios o dos para limitarla a dispositivos que son tabletas o teléfonos utilizando @media screen and (max-device-width: 1024px){}

O

Puede usar background-position: scroll e incluir algunos javascript que mantendrán la imagen en la posición desplazada (manteniéndola en la parte superior de la ventana): DEMO

Tenía una solución muy simple para esto, después de luchar con todos los métodos para arreglar esto.

Tuve el problema en mis dispositivos IOS móviles.

css (escritorio)

 #ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-size: auto; background-attachment: fixed; } .widget-wrap { background-attachment: scroll; } 

Luego lo sobreescribo con consulta de medios eliminando “fijo” como archivo adjunto de fondo.

css (móvil)

 /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-attachment: initial; } } 

initial: establece esta propiedad en su valor predeterminado. Creo que debido a que IOS no acepta ‘fijo’, vuelve a un valor predeterminado que acepta, desplazarse.

Esto funcionó para mí en todos los dispositivos. Espero que ayude a alguien más también.

Prueba esto:

HTML

 

Words that go over text

css

 .fixed-img { position: fixed; z-index: -1; } 

Ejemplo JSFiddle

Ejemplo en vivo

Sepa que este es un hilo viejo, pero quería proporcionar una solución actualizada que se base en la solución de @ Cruz-Nunez

Depender del tamaño de la ventana gráfica es probable que falle. Por ejemplo, confiar en una ventana gráfica de 767px no funcionará en iPads, y boost el tamaño anula el beneficio de este enfoque.

En su lugar, puede verificar si el dispositivo tiene capacidades de desplazamiento, y si no lo hace, anule de esta manera:

 @media (hover: none) { .homeHero { background-attachment: initial; } } 

También puede verificar si el dispositivo tiene un puntero de curso (por ejemplo, un dedo) en lugar de uno fino (por ejemplo, un mouse):

 @media (pointer: coarse) { ... } 
 .header {background-position: -99999px -99999px;} .header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;} 

Creo que he logrado el efecto deseado en mi propio sitio usando lo anterior junto con una solución para permitir que 100vh funcione en dispositivos iOS.

O simplemente puede colocar un div transparente que cubra la pantalla y usar desbordamiento: desplazamiento. Solo por el hecho de que puede reescribir la altura del div con javascript para screen.height.

 #scrollbox { width: 100%; height: 100%; overflow: scroll; background: transparent; }