Tengo un problema al momento de remplazar imagenes dependiente de la medida de la pantalla.
Tengo mi elemento header
el cual le paso un background-image
SCSS -
header{
height: 100vh;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
@media only screen and (min-width: 1200px) {
background-image: url("./assets/interno.jpg");
}
@media only screen and (min-width: 900px) {
background-image: url("./assets/externo.jpg");
}
}
Tengo mi ventana a más de 1200px
por lo tanto debería tomar el interno.jpg
pero no! esta tomando el banner externo.jpg
¿Alguien sabe cual es la mejor manera de trabajar con background-image
y responsive?