IOS 7 no redimensiona imagen de fondo

[rubiomike]

Hola a todos, estoy diseñando una web en la que las imágenes de fondo ocupan toda la pantalla. En principio todo funciona perfectamente en IE, Chorme y Firefox usando la propiedad de CSS background-size. El problema surge cuando intento ver la página en un iPad o iPod que llevan IOS 7.

He buscado bastante por Internet y según muchos usuarios es un problema que solo afecta a IOS 7, debido a que resetea la propiedad background una vez que se usa (si no me he enterado mal).

También he visto ejemplos de código en los que se asegura que dicho problema puede resolverse usando Media Queries, pongo algún ejemplo que he encontrado

Código:

@media (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio: 2){
	#principal{
	  background: url(../img/2x/[email protected]) no-repeat 0 0 !important;
	  width: 200px;
	  height: 100px;
	}
}


@media (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio: 2){
	#principal {
	  background: url(../img/2x/[email protected]) no-repeat 0 0 !important;
	  background-size: contain;
	}
}

Sin embargo no consigo que funcione correctamente. ¿Alguien me puede guiar un poco?. También he de decir que he buscado previamente en el foro, y aunque salen temas relacionados con background-size, no es precisamente la duda que tengo.

Un saludo a todos

[pzin]

¿Tienes algún ejemplo para verlo? Ya sea código o URL funcional.

[rubiomike]

Hola pzin, primero gracias por responder.

No tengo ninguna url en la que puedas ver como lo llevo, ya que estoy trabajando en local.

En cuanto al código, pues te pongo el código que afecta a las secciones en cuestión

Código:

#principal { 
	background: url(../images/bg_principal.jpg) no-repeat center center fixed;
       -webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover; 
}

Todas las demás secciones son iguales, solo que cambian el nombre, y la imagen de fondo. Y pertenecen a una clase que he llamado seccion:

Código:

.seccion { 
	height: 980px; 
	padding: 0; 
	margin: 0; 
	width: 100%; 
	max-width: 1920px; 
	position: relative; 
	margin: 0 auto; 
	border-top: 1px solid rgba(255,255,255,0.3); 
	border-bottom: 1px solid rgba(0,0,0,0.4); 
	box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

Luego en la página pongo:

Código:

<div id="principal" class="seccion">

Y aquí el contenido de la sección

</div>

Como dije al principio, todo funciona correctamente, a excepción de los dispositivos móviles que llevan IOS 7, debido a que no ajustan la imagen de fondo.

Un saludo y gracias de nuevo ;)

[pzin]

Pues a mi me funciona bien. He probado esto y no veo problema alguno en iOS7. O se me pasa algo que no veo.

Lo que se resetea se refieren a que si especificas primero background-size y luego background el primero es ignorado, no es otra cosa y no es tu caso ya que tienes el orden bien puesto.

[rubiomike]

Hola de nuevo, dices que con el código tal como lo tengo se te redimensiona correctamente la imagen del fondo? Podrías decirme en que dispositivo has realizado la prueba por favor?

Un saludo, y gracias de nuevo

[pzin]

Probé en iPhone 5 y iPad (4?), ambos con iOS7.

[rubiomike]

Muchas gracias de nuevo. Ahora si que estoy desconcertado, porque no sé a que se debe que en mis dispositivos el fondo no se redimensione. :(

Seguiré buscando. ¿A alguien se le ocurre algo?

Un saludo

[pzin]

Igual es alguna otra cosa que no has tenido en cuenta. Igual si subes a algún sitio el código que usas para probarlo se puede ver mejor. No hace falta que subas la página entera, sino sólo el código necesario para reproducir ese error.

Lo más lógico es que no sea un fallo de tus dispositivos ¿no?

[MAR_SABR]

Hola! Yo tengo también un problema con la imagen de fondo de mi sitio. La página funciona perfectamente en cualquier dispositivo y sistema operativo menos en los que tienen la actualización IOS7, donde no se ve la imagen de fondo directamente.
La verdad es que hice la página sobre una plantilla, así que no tengo idea de lo que puede estar pasando. Si alguien tiene alguna sugerencia se los agradezco.
El sitio es http://www.navarroclinicadental.com

[carfaja]

Que tal amigos, mi problema es que no me funciona en explorer 11, alguien me puede dar una mano por favor. Gracias de antemano a todos

[lktmaster]

Hola,

Yo tengo el mismo problema con el iOS7 veo que mar_saber lo ha solucionado con un js que le leyese proporcionalmente el tamaño de un di, pero me parece vergonzoso que se tenga que hacer así.

No hay otra solución con css?

Algo mas simple?

Muchas gracias