Foros del Web » Creando para Internet » CSS »

Altura imagen background responsive

Estas en el tema de Altura imagen background responsive en el foro de CSS en Foros del Web. Hola chicos, En mi web -> http://paupiap.com/ tengo una imagen de fondo de 1840px de ancho por 995px de alto y en mi css la ...
  #1 (permalink)  
Antiguo 26/03/2015, 13:09
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta Altura imagen background responsive

Hola chicos,

En mi web -> http://paupiap.com/ tengo una imagen de fondo de 1840px de ancho por 995px de alto y en mi css la tengo con estilo background-size: cover.

Pero si se fijan al hacer responsive la ventana del navegador se corta la imagen.

Como puedo hacer??

Muchas gracias
  #2 (permalink)  
Antiguo 26/03/2015, 13:11
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

podrias mostrar tu codigo..... creo que seria mas facil ayudarte de ese modo!!! n,n
__________________
que va arder ni que va arder, si nomas humea n,n!!!!
  #3 (permalink)  
Antiguo 26/03/2015, 13:12
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

Lo unico que tengo para el background es esto

.home {background-image: url("http://paupiap.com/wp-content/uploads/2015/03/bgpaupiap2.jpg");
background-size: cover;}
  #4 (permalink)  
Antiguo 26/03/2015, 13:14
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

ho sii... fui a tu www y creo ke es la imagen de fondo la que te da un poco de problemas no...???
lo que hay que hacer en estos casos es que hagas un auto ajuste a la imagen..... ahi mismo en css hay herramientas que puedes utilizar... aunque no se si estes usandop el bloc de notas para programarla o si estes usando un gestor como dreamweaver...???
__________________
que va arder ni que va arder, si nomas humea n,n!!!!

Última edición por webosiris; 05/04/2015 a las 13:47
  #5 (permalink)  
Antiguo 26/03/2015, 13:17
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

Es una web hecha en Wordpress y estoy tocando el CSS dentro del panel de la plantilla.. Habría solución??
  #6 (permalink)  
Antiguo 26/03/2015, 13:20
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

max-width: 565px;
width: expression(this.width > 565 ? 565: true);

prueba con esto..... claro que en donde estan los px tu calcularas el tamaño.... n,n
__________________
que va arder ni que va arder, si nomas humea n,n!!!!
  #7 (permalink)  
Antiguo 26/03/2015, 13:23
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

No me funciona..

El código está ahora así ->

.home {background-image: url("http://paupiap.com/wp-content/uploads/2015/03/bgpaupiap2.jpg");
background-size: cover; background-position: fixed; max-width: 565px;
width: expression(this.width > 565 ? 565: true);}
  #8 (permalink)  
Antiguo 26/03/2015, 13:27
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

quitale background-position: fixed; n,n
__________________
que va arder ni que va arder, si nomas humea n,n!!!!

Última edición por webosiris; 05/04/2015 a las 13:48
  #9 (permalink)  
Antiguo 26/03/2015, 13:40
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

Porque el contenido de mi página (logo e email) se encuentran ahora a la derecha?
  #10 (permalink)  
Antiguo 26/03/2015, 13:49
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

cuando usas las css debes crear clases por cada parte del diseño que quieres editar... entonces estas englobando todo..... por eso tu imagen no se edita.... y lo que debes hacer ahora es poner otra vez el background- position fixed.... y background size... aunque lo unico que hara es reducir la imagen y quedara incompleta en la pnatalla... ahora lo que tu debes hacer es una clase en el css para redimenzionar la imagen....

.imagen img {
max-width: 650px;
height: auto;
}
debes crear alog como esto mas o menos..... n,n
__________________
que va arder ni que va arder, si nomas humea n,n!!!!

Última edición por webosiris; 05/04/2015 a las 13:48
  #11 (permalink)  
Antiguo 26/03/2015, 13:59
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

No me ha hecho falta crear otras clases.. Simplemente he modificado el tamaño de los pixeles y queda así

.home {background-image: url("http://paupiap.com/wp-content/uploads/2015/03/bgpaupiap3.jpg"); max-width: 1500px; width: expression(this.width > 1500 ? 1500: true);}

LINK: www.paupiap.com

Que opinas??
  #12 (permalink)  
Antiguo 26/03/2015, 14:00
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

Pero ahora me doy cuenta que entrando desde el movil no se ve la imagen.. solo el cielo de la imagen.
  #13 (permalink)  
Antiguo 26/03/2015, 14:02
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

Pues si se ve bien... aunque en la imagen solo se ven los techos de una casa..... creo que si hicieras una clase donde puedas redimenzionar tu imagen para que conserve el tamaño y ademas pueda apreciarse completa embellecería todavia mas tu www..... pero si ve bien!!!! n,n
__________________
que va arder ni que va arder, si nomas humea n,n!!!!
  #14 (permalink)  
Antiguo 26/03/2015, 14:05
Avatar de miguelgalannunez  
Fecha de Ingreso: febrero-2012
Mensajes: 158
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Altura imagen background responsive

Podrías ayudarme a hacerlo.. soy novato en esto y quiero tener una web bonita pero me cuesta mucho..

¡¡Te lo agradecería un montón!!
  #15 (permalink)  
Antiguo 26/03/2015, 14:06
Avatar de va4go0balboa  
Fecha de Ingreso: marzo-2015
Ubicación: San Cristobal de las casas....
Mensajes: 32
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Altura imagen background responsive

aqui te dejo este codigo espero y te pueda servir tambien..... quizas tengas que hacerle algunos ajustes pues estas programando en wordpress....

html {
background: url(background.jpg) no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

pero puede ser mas utilizable.... n,n
__________________
que va arder ni que va arder, si nomas humea n,n!!!!
  #16 (permalink)  
Antiguo 26/03/2015, 15:21
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Altura imagen background responsive

fixed no funciona en dispositivos móviles, entonces la imagen de fondo se verá mal.

cover siempre recorda una parte del fondo, bien por la vertical, bien por la horizontal.

El caso es que si quieres que el fondo ocupe todo sin deformarlo, siempre se recortará por alguna parte.

Y eso de width: expression… fue un invento de Microsoft que solamente funcionaba en IE5-7 me parece.
__________________
(:

Etiquetas: altura, background, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:59.