Imagen de fondo que no se muestra en iPad y iPhone

Quiero crear una sección con un fondo que lo cubra en una página web móvil, así que estaba usando el siguiente código CSS:

#section1{ background: url("background1.png") auto 749px; height: 749px; } 

El fondo se muestra correctamente en Android (Chrome, Firefox …), pero no se muestra en absoluto en iPhone o iPad (Safari, Chrome iOS …). Intenté establecer estas propiedades usando jQuery cuando el DOM está listo, pero no tuve suerte. Leí que el tamaño podría ser un problema, pero la imagen es de aproximadamente 700kB (1124x749px) por lo que debería cumplir las reglas de la Guía de contenido web de Safari . ¿Cuál es el problema?

Hay un problema con su regla de CSS:

Utiliza la notación abreviada en la que la propiedad de background-size fondo viene después de la propiedad de background-position fondo y debe estar separada por un / .

Lo que intenta hacer es establecer la posición, pero fallará ya que el valor auto no es válido.

Para que funcione en notación abreviada, tiene que verse así:

 background: url([URL]) 0 0 / auto 749px; 

También tenga en cuenta que hay un valor llamado cover , que puede ser adecuado y más flexible aquí:

 background: url([URL]) 0 0 / cover; 

La compatibilidad con background-size de background-size en la notación abreviada tampoco es muy amplia, ya que es compatible con Firefox 18+, Chrome 21+, IE9 + y Opera. No es compatible con Safari en absoluto. Al respecto, sugeriría usar siempre:

 background: url("background1.png"); background-size: auto 749px; /* or cover */ 

Aquí hay algunos ejemplos y una demostración para demostrar ese comportamiento. Verás que Firefox, por ejemplo, muestra todas las imágenes excepto la primera. Safari por otro lado muestra solo el último.

CSS

 section { width: 200px; height: 100px; border: 1px solid grey; } #section1 { background: url(http://placehold.it/350x150) auto 100px; } #section2 { background: url(http://placehold.it/350x150) 0 0 / auto 100px; } #section3 { background: url(http://placehold.it/350x150) 0 0 / cover; } #section4 { background: url(http://placehold.it/350x150) 0 0; background-size: cover; } 

Manifestación

Pruebe antes de comprar

Otras lecturas

MDN CSS referencia “fondo”
Referencia de MDN CSS “tamaño de fondo”

<'tamaño de fondo'>
Ver tamaño de fondo . Esta propiedad se debe especificar después de la posición de fondo, separada con el carácter ‘/’.

Mi problema es que iOS no admite background-attachment: fixed . Al quitar esa línea, apareció la imagen.

Sin embargo, parece que hay soluciones para una imagen de fondo fija: Cómo replicar el archivo adjunto de fondo corregido en iOS

Espero que esto ayude a alguien en la desesperación. En mi caso, el tamaño de la imagen era demasiado grande, por lo que el iPad simplemente no estaba cargando (y en realidad era correcto).

Disminuir su tamaño y calidad resolvió el problema de carga.

El problema no se resolvió cuando traté de usar correctamente el fondo en forma abreviada. Funciona cuando divido la propiedad de fondo:

 #section1{ background: url("background1.png"); background-size: auto 749px; height: 749px; } 

Reduzca el tamaño de la imagen si nada más funciona: a iOS no le gustan los tamaños de imagen grandes en el móvil y simplemente no mostrará la imagen si es demasiado grande.

Excelentes fundamentos de @insertusernamehere! No importaba lo que hiciera, no conseguía que mi imagen apareciera … hasta que volví a lo básico. El tamaño de la imagen era demasiado grande y al iPhone no le gustó cargar una imagen de ese tamaño, más de 700kbs. Entonces, lo reduje a 32kb y estábamos en acción.

Tenía un texto de sangría negativo que arrojaba mi imagen de fondo fuera de la página, por lo que el color: transparente es entonces.

No vi a nadie específicamente decir esto, pero también debes definir el ancho. Hace que, desde que configuré el tamaño de fondo para “contener”, tiene que saber cuáles son las dimensiones del contenedor.

Una vez que lo hice, el fondo se procesó como se esperaba.

 @media only screen and (max-width:599px) { [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; } } @media only screen and (max-width:479px) { [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; } } 

Nota: La URL de fondo debe definirse para ambos puntos de interrupción para que funcione para iPhone 5 (iOS7).

Agregar un color de fondo resolvió mi problema

 background-color: #F4F4F2;