> Faqs > Cambio de imagen de fondo segun pantalla

Cambio de imagen de fondo segun pantalla

Hola! Quisiera saber para un diseño resposivo como cambiar la imagen de fondo segun sea pantalla de celular, tableta o display de PC. Gracias!

Respuestas

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/

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
81 2 6 6