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>
!important
?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