1

Tengo el siguiente código para poner una imagen de fondo fija que se mantenga haciendo scroll. En android se ve perfecto pero en dispositivos ios no se ve bien, la imagen no se mantiene fija y coge el 100% del alto de la pagina web, cuando en teoria deberia coger solo el 100% de alto de la pantalla del telefono. El código deberia estar bien ya que en android funciona correctamente pero no se el porque en ios/safari no.

Este es el código:

@media only screen and (max-width:767px) {

body {
        width: 100%;
        height:100%;
        margin: 0;
        background-image: url('../img/fondos/fondoprincipal.png');
        background-attachment: fixed;
        background-size: auto 100%;
        background-repeat: no-repeat;
        
    }
}

He probado a cambiar los anchos y altos pero nada, el problema me ha surgido al poner que el cuerpo y el html sean 100% de alto, pero necesito que sea así para que el primer contenedor de la página se visualice entero en la pantalla.

3
  • Una opcion que se vería similar es no poner la imagen como background, sino como imagen fixed atras de los otros elementos.
    – Ange Reyna
    Commented el 27 ago. 2020 a las 14:01
  • pensaba que de esta forma es como se ponia fija detras, la idea seria poner un <img> al principio del body i luego hacer el main encima? Commented el 28 ago. 2020 a las 8:59
  • Con la etiqueta <img> y posicionarlo fijo atras tal vez funcione porque veo que suelen tener problemas cuando lo intentan como background. El problema es que en dispositivos iOS no lo soporta, inclusive puedes intentar incluyendo javascript stackoverflow.com/questions/25552827/….
    – Ange Reyna
    Commented el 28 ago. 2020 a las 11:05

2 respuestas 2

0

Prueba cambiando:

background-size: auto 100%;

por

background-size: auto 100vh;
1
  • Lo acabo de probar y al hacerlo la imagen no queda fija, al hacer scroll se ve donde acaba la imagen y se queda un fondo blanco. Yo quiero que se quede fija y al hacer scroll la imagen de fondo quede quieta, repito, en android me funciona bien, el problema esta en ios. Commented el 27 ago. 2020 a las 8:51
0

Esto hace que la imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador

    background-size: cover;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.