css - poner - insertar imagen html url

Imagen de fondo fija con ios7

Question

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?

Answer 1

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;
}

document.getElementByID("scrollbox").style.height = screen.height;

Answer 2

Prueba esto:

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Words that go over text</h1>
</div>

css

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

Ejemplo JSFiddle

Ejemplo en vivo

Answer 3

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 aumentar 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) { ... }

Answer 4

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)

@media (max-width: 767px) {
#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.

Answer 5

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

Answer 6

.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.