> Faqs > Cómo hacer el cambio de imagen de fondo segun el tamaño de pantalla

Cómo hacer el cambio de imagen de fondo segun el tamaño de pantalla

Hola! Quisiera saber cómo cambiar la imagen según el tamaño de la pantalla del ordenador o dispositivo.

La idea es conseguir un diseño resposivo, que permita cambiar la imagen de fondo segun sea pantalla de celular, tableta o display de PC.

Gracias!

Respuestas

Para cambiar cualquier cosa según la pantalla del usuario, dispositivos, desktop, etc. tienes que usar las MediaQueries.

Lo mejor es que leas el artículo sobre las media queries css.

Recuerda siempre mantener una estrategia Mobile First, ya que es lo más recomendable de cara a la organización de las reglas CSS.

Con este código es suficiente:

body {
    background-image(imagen-fondo.jpg)
}
@media(min-width: 680px) {
    body {
        background-image(imagen-fondo-tablet.jpg)
    }
}
@media(min-width: 1080px) {
    body {
        background-image(imagen-fondo-desktop.jpg)
    }
}
Gustavo
144 2 12 10

Ya encontré una solución! Defino una imagen válida para pantallas grandes y cuando se achica el tamaño de pantalla, o abre en un celular, se muestra otra imagen:

body { 
	background-repeat: no-repeat; 
    background-image: url(imagenes/img00b.jpg); 
    background-size: cover; 
} 

@media only screen and (max-width: 600px) { 
	body { 
		background-image: url(imagenes/logoClub.jpg); 
	}   
}
Jorge
7 1 1
https://es.godaddy.com/blog/imagen-responsive-en-css3-para-el-fondo-de-tu-web/