Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Reemplazar imagen con otra al achicar pantalla CSS

CSS - Reemplazar imagen con otra al achicar pantalla CSS

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

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
sin imagen de perfil

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
sin imagen de perfil

Reemplazar imagen con otra al achicar pantalla CSS

Publicado por juan salinas (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
Val: 2
Ha aumentado su posición en 13 puestos en CSS (en relación al último mes)
Gráfica de CSS

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