Problema con Media Queries CSS

publicado por: Anonymous

Buenas días, compañeros. Vengo con la siguiente duda.

Tengo una media query para poner un fondo de pantalla en mi master, situada en el body.

body {
    background : url('../../escritorio.png');
    background-size : cover !important;
    background-repeat : no-repeat !important;
    background-position : center center !important;
    background-attachment : fixed !important;
    background-color: #464646;
}

@media only screen and (max-width:768px) {
    body {
        background : url('../../movil.png');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
}

En cuestiones de escritorio todo va perfecto pero al momento de usar Safari mobile o incluso, el mismo Chrome mobile.
En Safari la imagen me aparece desfasada, como si estuviera usando la imagen para navegadores mientras que en Chrome ni siquiera me muestra la imagen.

Como dato extra, ya tengo incluido la etiqueta meta en mi master.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

P.D. En el único navegador que me funciona es en IE del Win 10 mobile.

P.D.2 Anexo imágenes de como se ve en IE del Win 10 mobile y como se ve en chromme mobile de android

Win 10 mobile

chromme mobile de android

solución

Después de estar cambiando estilo tras estilo, al fin encontré la combinación que a mi me funciono, no puedo asegurar que le funcione a todos o que sea la mejor respuesta pero aquí esta el código CSS:

html, body {
    height: 100%;
}

html {
    overflow-y: hidden;
}

body {
    overflow-y: scroll;
    background: url('escritorio.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (max-width:768px) {
    body {
        background: url('movil.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

Espero ayude !

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *