Estoy teniendo problemas con background-image. Mi sitio web se veía bien en los dispositivos Android, luego me enteré de que los iPhones y los iPads no como background-size: cover.

Me fijo mediante la configuración de background-size: 100%.

En el iPhone simuladores en la web, el sitio se ve muy bien, pero tan pronto como probar el sitio en un verdadero iPhone (iOS 9.3), el fondo de las imágenes no se muestran.

La imagen de cabecera de carga, esta imagen se utiliza como un fondo de más abajo en el sitio, que se muestra allí, también.
La otra imagen de la derecha por encima de la única carga de fondo empieza a cargar, pero luego parece que se anula por alguna razón.

El tamaño de las imágenes es: 1920×1080.

El sitio web: http://www.unterwasserfotografie-thomas-uhl.de/

ACTUALIZACIÓN:

He intentado Aziz’ solución desde abajo.
Jugando con background-size:auto 100% hace que las imágenes se vean mejor en el smartphone, pero no se cargan en móvil los dispositivos de apple.
Sin embargo, si background-size: cover es el conjunto de todos los fondos están recibiendo carga, el problema es que sólo una pequeña parte de la imagen que se muestra (en la parte superior derecha de la imagen?!) y esta parte es bastante confusa (se parece a la imagen ampliada).
Como yo no cambio nada de lo que establece background-size:cover a background-size:100% auto, no puedo creer, que las imágenes están recibiendo apilados unos sobre otros.

En el momento en el que me he fijado que el background-size:100% nuevo, esto se ve mejor en dispositivos de Escritorio y va bien por ahora para dispositivos móviles, no voy a comenzar a preocuparse por el diseño tan largo como los fondos no se han cargado correctamente.

Entiendo, que background-size: 100% auto no es la manera más agradable para los fondos y definitivamente considerar la solución 1. Lo que no entiendo es, ¿por qué sólo hay un fondo que se cargan a todos, al cargar el sitio en un iPhone. ¿Background-position: center simplemente pila de todos los fondos en la misma posición en la pantalla, así que sólo puedo ver la última que se ha cargado? Recuerde: Hay alrededor de 6 fondos en el sitio, pero sólo uno de ellos se muestra, la que tiene su imagen en el encabezado.

Gracias por su apoyo hasta ahora, pondré una recompensa a esta pregunta como estoy realmente desesperado en este problema.

InformationsquelleAutor christian | 2016-04-18

7 Comentarios

  1. 9

    Uno de los principales problemas es el hecho de que iOS de los dispositivos móviles tienen errores de representación background-size:cover; junto con background-attachment:fixed;.

    Por lo tanto, una solución fácil sería utilizar una consulta de medios de comunicación para cambiar la background-attachment de la propiedad en el móvil (ancho de la pantalla a menos de 640px):

    El CSS:

    CSS:

    @media (max-width:640px) {
      section {
        background-attachment:initial;
      }
    }

    Cambiando el background-attachment de la propiedad en el móvil, que permitirá que las imágenes se muestren correctamente en los dispositivos iOS.

    —EDIT—
    De acuerdo a esta pregunta: stackoverflow.com/questions/18999660/ no parece ser un problema con la abreviatura de ordenamiento de la propiedad background en iOS.

    Tal vez intentar convertir su mano, así:

    CSS:

    .bg-1 { 
      background-image: url(../Dateien/sharkGround1920.jpg); 
      background-size: cover; 
      background-attachment:fixed; 
    }

    • También puede cambiar el apego a fixed en lugar de initial, sin embargo no se admite en la incorporada en el navegador de android: caniuse.com/#feat=background-attachment
    • He probado esta sugerencia, pero los fondos todavía no están cargados. He intentado usar imágenes más pequeñas <200 kb, pero todavía no funciona. Me estoy volviendo loco con este.
    • De acuerdo a esta pregunta: stackoverflow.com/questions/18999660/… no parece ser un problema con la abreviatura de ordenamiento de la propiedad background en iOS. Tal vez intentar convertir su mano de modo que usted tiene background-image:url(...) y background-position: center center; etc.
    • aceptar esta parece ser la última oportunidad que tengo. Podría usted por favor decirme lo que parece ser la forma correcta para que el siguiente código? .bg-1 { background: url(../Dateien/sharkGround1920.jpg) no-repeat center center fijo; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100%; }
    • Que sería: .bg-1 { background-image: url(../Dateien/sharkGround1920.jpg); background-size: cover; background-attachment:fixed; }
    • ok eso es lo que me pasa a continuación: bilder-subir.ue/mostrar.php?archivo=5a111f-1461684502.png cuando ajuste el tamaño de la cubierta al 100%, a continuación se muestra la imagen, pero 2 veces a la derecha debajo de uno a otro. La adición de no repetición debe ayudar, pero me gustaría mantener la cubierta en lugar de 100%
    • Por la forma en que siéntase libre de publicar su respuesta como una versión detallada, ya esta solucionado mi problema, al menos lo suficiente para que yo tenga algo para trabajar 🙂 (de los que no puedo darle la recompensa en tu comentario)
    • cool – ¡muchas gracias! He editado mi respuesta original para añadir lo que hemos discutido en los comentarios!

  2. 5

    Su background-size establece un único valor de ancho. Que se traduce en background-size: 100% auto donde la altura es automático y preserva la relación de aspecto. Acoplamiento que con background-position de center hará que el fondo para estar en el medio de ventanilla con espacios en blanco a su alrededor.

    Demostración:

    Fija las imágenes de fondo desaparecen en el iPhone/iPad

    jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/


    Solución 1: Automático de ancho en lugar de automático de altura

    Por defecto background-size: 100% significa que el ancho es de 100% y la altura es automática. Esto es bueno para muchas resoluciones o dispositivo en orientación horizontal. Sin embargo, cuando el dispositivo está en modo retrato, habrá un montón de espacio en blanco vertical. Usted podría utilizar la lógica, pero conmutador de modo que la altura es de 100% y la anchura es automática mediante la aplicación de background-size: auto 100%;

    CSS:

    div {
      height:400px;
      border:1px solid red;
      background: url(http://lorempixel.com/970/540) fixed no-repeat center;
      background-size:auto 100%;
    }
    
    div:nth-of-type(2) {
      background-image: url(http://lorempixel.com/960/541);
    }
    
    p {
      background:#FFF;
      padding:3em;
      margin: 0;
    }

    HTML:

    <div></div>
    <p>Lorem Ipsum</p>
    <div></div>

    jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/4/

    Es probablemente la mejor manera de aplicar la regla dentro de un @media de consulta para orientar paisaje/dispositivos móviles.


    Solución 2: Estirada de fondo

    Se podría resolver mediante la aplicación background-size: 100% 100% para estirar el fondo a través de la ventanilla y quitar espacios en blanco. A pesar de que el fondo va a perder su relación de aspecto extraño y se extiende pueden ocurrir.

    CSS:

    div {
      height:400px;
      border:1px solid red;
      background: url(http://lorempixel.com/970/540) fixed no-repeat center;
      background-size:100% 100%;
    }
    
    div:nth-of-type(2) {
      background-image: url(http://lorempixel.com/960/541);
    }
    
    p {
      background:#FFF;
      padding:3em;
      margin: 0;
    }

    HTML:

    <div></div>
    <p>Lorem Ipsum</p>
    <div></div>

    jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/2/

    Alternativamente podría quitar la background-position o la fixed apego o simplemente utilizar img etiquetas en lugar de fondo.

    Cada solución tiene sus propios inconvenientes, por lo que considerar el que mejor se adapte a su proyecto.

    • Gracias por tu detallada respuesta. Entiendo, que background-size: 100% auto no es la manera más agradable para los fondos y definitivamente considerar la solución 1. Lo que no entiendo es, ¿por qué sólo hay un fondo que se cargan a todos, al cargar el sitio en un iPhone. ¿Background-position: center simplemente pila de todos los fondos en la misma posición en la pantalla, así que sólo puedo ver la última que se ha cargado? Recuerde: Hay alrededor de 6 fondos en el sitio, pero sólo uno de ellos se muestra, la que tiene su imagen en el encabezado.
    • Son, probablemente, apilados uno debajo de otro, tratar de eliminar todo el contenido y mantener el fondo de divs y probarlo. Lamentablemente no tengo todos los dispositivos de Apple. Usted puede tratar de .container {display: none} o deshabilitar la fixed apego sólo para asegurarse de que las imágenes son de hecho cargado.
  3. 2

    Lamentablemente no se puede utilizar el efecto de paralaje de esta manera en los dispositivos iOS, ya que no apoyan realmente de fondo-attachement regla.

    Si quieres perder este efecto sólo en iOS, puedes utilizar un agente de usuario a detectar el dispositivo y agregar una clase a la cuerpo.

    Ejemplo:

    var _isOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/);
    
    if (_isOS) {
      $('body').addClass('is-os');
    } 

    De referencia de detección de iOS a través de los agentes de usuario: Forma sencilla de identificar iOS agente de usuario en un jQuery si/entonces afirmación?

    De esta manera con la que el código JS, puede aplicar la siguiente regla CSS:

    body.is-os section {
      background-attachment: initial !important;
      background-size: cover !important;
    }

    He utilizado importante como yo sólo se utiliza uno selector, con el fin de tomar la prioridad de la actual código.

    Esta trabajado en el iPhone 6s Plus.

  4. 1

    tratar así de fácil las cosas para con todos los navegadores tamaño del fondo de la cubierta. Ellos aman el tamaño del fondo de la cubierta también, pero con una maneras diferentes: a)

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  5. 1

    Creo que su problema de navegador con javascript obtener la información del dispositivo. luego, a continuación, cargar la imagen como por dispositivo con diferente resolución.

Dejar respuesta

Please enter your comment!
Please enter your name here