0

Estoy tratando de que la imagen de fondo cambie dependiendo de en que dispositivo se vea pero siempre carga la imagen que esta en la propiedad only screen and (min-width: 768px). No sé por que pasa esto

html, body, .body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .body {
        /* imagen de tablet */
            background-image: url("https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-color: #a4448b;
        }

        /* For desktop */
        @media only screen and (min-width: 768px) {
            .body {
            /* imagen de manos en el teclado*/
                background-image: url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80");
            }
        }
<div class="body"></div>

2
  • 1
    Que pasa si agregas !important? Commented el 4 mar. 2020 a las 15:27
  • 1
    Si te está funcionando, lo que pasa es que a lo mejor no como esperas. Con la regla min-width: 768px le estás diciendo al navegador que cargue la imagen de la mediaquerie en dispositivos que al menos tengan 768px de ancho ( > 768px). Por lo que te va a mostrar la de las "manos con el ordenador" en pantallas superiores a 768px y la de "las plantas" en dispositivos inferiores a 768px
    – phpMyGuel
    Commented el 4 mar. 2020 a las 15:52

1 respuesta 1

0

Sirve con ponerle un min-width y un max-width al que será tu imagen responsiva.

<style>
html, body, .body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .body {
        background-image: url("https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #a4448b;
        }

    /* For desktop */
    @media only screen and (min-width:0px) and (max-width:768px) {
        .body {
        /* imagen de manos en el teclado*/
            background-image: url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80");
        }
    }
</style>

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.