“Background-size: cover” no cubre la pantalla del móvil

Tengo una foto de fondo en mi sitio con background-size:cover . Funciona en su mayor parte, pero deja un extraño espacio en blanco ~ 30px en mi Galaxy S3 en modo vertical.

Adjunté una captura de pantalla. La línea verde 1px es para ilustrar toda la pantalla. Parece que el fondo se detiene justo después de las redes sociales.

Probé esto eliminando el ul y el fondo adjunto a la parte inferior del texto del eslogan.

captura de pantalla de problema

Además, aquí está mi opinión del portait móvil de CSS:

 @media only screen and (max-width: 480px) { .logo { position: relative; background-size:70%; -webkit-background-size: 70%; -moz-background-size: 70%; -o-background-size: 70%; margin-top: 30px; } h1 { margin-top: -25px; font-size: 21px; line-height: 21px; margin-bottom: 15px; } h2 { font-size: 35px; line-height: 35px; } .footer_mobile { display: block; margin-top: 20px; margin-bottom: 0px; } li { display: block; font-size: 1.3em; } 

Esto solía no suceder, pero creo que accidentalmente lo paré mientras intentaba resolver otro problema.

Después de horas de probar diferentes cosas, agregando min-height: 100%; al final de html debajo del { background:... } funcionó para mí.

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(/images/bg.jpg) no-repeat; background-size: 100% 100%; } @media (min-width: 600px) { html { background: url(/images/bg.jpg) no-repeat center center fixed; background-size: cover; } .html-mobile-background { display: none; } } 

Galaxy S3 tiene un ancho superior a 480px tanto en vertical como en horizontal, por lo que no creo que se apliquen esas reglas de CSS. Necesitarás usar 720px.

Prueba agregar:

 * { background:transparent } 

justo al final y mueve tu html { background:... } CSS después de eso.

De esta forma, puede ver si hay un divisor de pie móvil o cualquier otro elemento que haya creado que esté obstaculizando el camino, bloqueando la vista.

También trataría de aplicar el CSS de fondo al cuerpo en lugar de HTML. Espero que te acerques a la respuesta.

La solución actual sería usar la altura de la ventana gráfica (vh) para indicar la altura deseada. El 100% no funcionó para Mobile Chrome. CSS:

 background-size: cover; min-height: 100%;