1

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?

2 respuestas 2

1

Verifica primero si tienes en tu "head" el meta del viewport para responsive

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

Si esta todo bien la modificación que haría seria la siguiente.

CSS:

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    header {
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-image: url("./assets/interno.jpg");
    }
}

@media only screen and (min-width: 900px) and (max-width: 1199px) {
    header {
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-image: url("./assets/externo.jpg");
    }
}

Dentro de las etiquetas de las medias queries establezco que es lo que realizara para que se vean los cambios

2
  • Me sigue colocando la segunda imagen, no esta respetando el min-width
    – DoubleM
    Commented el 10 dic. 2019 a las 18:29
  • O establece un "min-width" y un "max-width" y puedes ir jugando con la resolución. El cambio esta en la respuesta Commented el 10 dic. 2019 a las 18:44
0

Debes colocar el breakpoint o 'media query' del menor ancho de pantalla por encima del mayor ya que el orden de lectura de CSS es arriba a bajo teniendo más peso lo último escrito:

  @media only screen and (min-width: 900px) {
     header {
         height: 100vh;
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover;
         background-image: url("./assets/externo.jpg");
      }
   }

 @media only screen and (min-width: 1200px){
     header {
         height: 100vh;
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover;
         background-image: url("./assets/interno.jpg");
     }
 }

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.