Fondo de CSS: reemplazo de la cubierta para Mobile Safari

Hola, tengo varios divs en mi página que tienen imágenes de fondo que quiero expandir para cubrir todo el div, que a su vez puede expandirse para llenar el ancho de la ventana gráfica.

Obviamente background-size: cover comporta de forma inesperada en los dispositivos con iOS. He visto algunos ejemplos de cómo solucionarlo, pero no puedo hacer que funcionen en mi situación. Idealmente, preferiría no agregar tags adicionales al HTML, pero si es la única manera, lo haré.

Aquí está mi código:

 .section { margin: 0 auto; position: relative; padding: 0 0 320px 0; width: 100%; } #section1 { background: url(...) 50% 0 no-repeat fixed; background-size: cover; } #section2 { background: url(...) 50% 0 no-repeat fixed; background-size: cover; } #section3 { background: url(...) 50% 0 no-repeat fixed; background-size: cover; } 
  
...
...
...

La pregunta es, ¿cómo puedo obtener la imagen de fondo para cubrir completamente la sección div, teniendo en cuenta el ancho variable del navegador y la altura variable del contenido en el div?

He tenido este problema en muchas vistas móviles que construí recientemente.

Mi solución sigue siendo un respaldo CSS puro

http://css-tricks.com/perfect-full-page-background-image/ como tres métodos excelentes, los dos últimos son retrocesos para cuando la cubierta de CSS3 no funciona.

HTML

  

CSS

 #bg { position: fixed; top: 0; left: 0; /* Preserve aspect ratio */ min-width: 100%; min-height: 100%; } 

Recientemente tuve un problema similar y me di cuenta de que no se debe al background-size:cover sino background-attachment:fixed .

Resolví el problema usando una consulta de medios para iPhone y estableciendo background-attachment propiedad de background-attachment para scroll .

Para mi caso:

 .cover { background-size: cover; background-attachment: fixed; background-position: center center; @media (max-width: @iphone-screen) { background-attachment: scroll; } } 

Editar: El bloque de código está en LESS y asume una variable predefinida para @iphone-screen . Gracias por el aviso @stephband .

También publicado aquí: “background-size: cover” no cubre la pantalla del móvil

Esto funciona en Android 4.1.2 e iOS 6.1.3 (iPhone 4) y conmutadores para escritorio. Escrito para sitios receptivos.

Por las dudas, en tu cabecera HTML, algo como esto:

  

HTML:

 

CSS:

 html { /* Whatever you want */ } .html-mobile-background { position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 125%; /* To compensate for mobile browser address bar space */ background: url(/https://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari/images/bg.jpg) no-repeat; background-size: 100% 100%; } @media (min-width: 600px) { html { background: url(/https://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari/images/bg.jpg) no-repeat center center fixed; background-size: cover; } .html-mobile-background { display: none; } } 

Hay respuestas en la red que intentan resolver esto, sin embargo, ninguno de ellos funcionó correctamente para mí. Objetivo: poner una imagen de fondo en el body y tener background-size: cover; trabajo móvil, sin consultas de medios, overflows o hacky z-index: -1; position: absolute; superposiciones.

Esto es lo que hice para resolver esto. Funciona en Chrome en Android incluso cuando el cajón del teclado está activo. Si alguien quiere probar iPhone, sería fantástico:

 body { background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center; background-size: cover; -webkit-background-size: cover; /* safari may need this */ } 

Aquí está la magia. Trate html como un contenedor con una relación de altura aplicada en relación con la ventana gráfica real. ¿Conoces la etiqueta responsiva clásica ? Esta es la razón por la que se usa vh . Además, en la superficie, parecería que el body debería obtener estas reglas, y puede verse bien … hasta un cambio de altura, como cuando se abre el teclado.

 html { height: 100vh; /* set viewport constraint */ min-height: 100%; /* enforce height */ } 

Para las versiones de Safari < 5.1, el tamaño de background-size propiedad css3 no funciona. En tales casos, necesitas un webkit .

Por lo tanto, debe usar el -webkit-background-size para especificar el tamaño de fondo .

Por lo tanto, use -webkit-background-size:cover .

Referencia: versiones de Safari con webkit

Encontré lo siguiente en el sitio web de Stephen Gilbert: http://stephen.io/mediaqueries/ . Incluye dispositivos adicionales y sus orientaciones. ¡Funciona para mi!

Nota: Si copia el código de su sitio, querrá editarlo para espacios adicionales, dependiendo del editor que esté usando.

 /*iPad in portrait & landscape*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */} /*iPad in landscape*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */} /*iPad in portrait*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ } 

Ese es el código correcto de tamaño de fondo:

 
  
 @media (max-width: @iphone-screen) { background-attachment:inherit; background-size:cover; -webkit-background-size:cover; } 

Encontré una solución que funciona, el siguiente ejemplo de código CSS se dirige al iPad:

 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { html { height: 100%; overflow: hidden; background: url('http://url.com/image.jpg') no-repeat top center fixed; background-size: cover; } body { height:100%; overflow: scroll; -webkit-overflow-scrolling: touch; } } 

Enlace de referencia: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

 html body { background: url(/assets/images/header-bg.jpg) no-repeat top center fixed; width: 100%; height: 100%; min-width: 100%; min-height: 100%; -webkit-background-size: auto auto; -moz-background-size: auto auto; -o-background-size: auto auto; background-size: auto auto; }