CSS - Reemplazar imagen con otra al achicar pantalla CSS

   
Vista:

Reemplazar imagen con otra al achicar pantalla CSS

Publicado por juan (2 intervenciones) el 23/12/2015 16:01:21
Hola a todos, les explico mi problema:

En una web responsive tengo una imagen con un logo muy grande, y necesito que al achicar la pantalla (o en una pantalla de tablet - smartphone) la imagen en cuestión se cambie por otra, esto se puede hacer desde css??

Mi idea es mas o menos así:

1
2
3
4
5
6
@media screen and (max-width: 500px){
	.foto_logo{
               background:url(logo2.png);
		width:100%;
		 height: auto;
  }


Obviamente, este método no funciona, que puedo hacer?

Muchas gracias!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Reemplazar imagen con otra al achicar pantalla CSS

Publicado por walter (47 intervenciones) el 23/12/2015 16:58:34
Hola. yo lo que hago es tener un logo para monitores, tablet y notebooks y otro para moviles de 640 para abajo.
entonces:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#logo {
	height: 125px;
	width: 100px;
	margin-left: -50px;
	position: absolute;
	margin-top: 10px;
	background-image: url(img/logo-768.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: block;
	float: left;
	left: 50%;
	padding-top: 0px;
}
en negrita está lo que debes cambiar en los otros mediaqueries. y cargaría la imagen según la pantalla.
acá hay un ejemplo http://sonidosdistantes.com.ar/judo/
donde los logos son diferentes segun resolución.
fijate que la imagen está como fondo del div y es "cover".
espero sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Reemplazar imagen con otra al achicar pantalla CSS

Publicado por juan salinas juan.salinas.aedo@gmail.com (2 intervenciones) el 23/12/2015 17:17:26
Garcias Walter, como idea no esta mala, el detalle esta que la imagen de mi logo es grande y lo tengo al costado de otra imagen,

la web en si es esta:

http://desarrollo.utalca.cl/falcon/

Como veras, al reducir la pantalla, la imagen de "Universidad de Talca", desaparece, eso lo tengo en mi CSS:

1
2
3
4
5
@media screen and (max-width: 985px){
.foto_cabecera2 {
	   display: none;
	}
}

Mi idea es que esa misma imagen de "Universidad de Talca", al achicar la pantalla, esta en vez de desaparecer se reemplace por otra imagen,

Alguna idea o sugerencia??

Mil gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

Reemplazar imagen con otra al achicar pantalla CSS

Publicado por Angel Komander (54 intervenciones) el 25/12/2015 22:11:31
por que no agregar una imagen para movil, que este oculta y aparesca con los media queries ;)

1
2
3
4
5
6
7
8
@media screen and (max-width: 985px){
.foto_cabecera2 {
	   display: none;
	}
.foto_cabecera3 {
	   display: block;
	}
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Diego

Reemplazar imagen con otra al achicar pantalla CSS

Publicado por Diego (2 intervenciones) el 27/12/2015 03:55:57
Hola Juan!
Para lo que quieres realizar se puede hacer de la siguiente forma:

Primero especificas en tu css global la clase o id de tu imagen o logotipo.

1
2
3
4
5
6
#logo {
width:300px;
height:300px;
background:url(http://dominio.com/images/logo.png) center center;
background-size: 300px 300px;
}

Ahora en tu css donde pones tus media queries:


1
2
3
4
5
6
7
8
9
//Código para Móvil
@media only screen and (min-width: 100px) and (max-width: 700px) {
#logo {
width:200px;
height:200px;
background:url(http://dominio.com/images/logo2.png) center center;
background-size: 200px 200px;
}
}

1
2
3
4
5
6
7
8
9
// Código para Tablets
@media only screen and (min-width: 700px) and (max-width: 1024px) {
#logo {
width:250px;
height:250px;
background:url(http://dominio.com/images/logo3.png) center center;
background-size: 250px 250px;
}
}

Espero que te haya servido.

Saludos!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar