Foros del Web » Creando para Internet » CSS »

Alinear imagen a pie de pantalla

Estas en el tema de Alinear imagen a pie de pantalla en el foro de CSS en Foros del Web. Buenas, vereis necesito poner una imagen debajo del todo de la pantalla, pero no se como hacerlo. En el CSS tengo puesto esto: Código: body ...
  #1 (permalink)  
Antiguo 17/01/2009, 05:08
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Alinear imagen a pie de pantalla

Buenas, vereis necesito poner una imagen debajo del todo de la pantalla, pero no se como hacerlo.

En el CSS tengo puesto esto:
Código:
body {
	background: url('img/fondo.jpg') no-repeat bottom center;
	}
Pero esto me pone la imagen al nivel del footer, donde acabaría la web, pero en resoluciones grandes se me queda un hueco blanco debajo del footer. Lo que necesito es que la imagen se quede debajo de la pantalla, tenga la resolucion que tenga.

Esto se puede hacer?? alguien podria echarme una mano?? Muchas Gracias por adelantado!


EDITO: Tambien me serviria alguna forma para alinear el footer de manera que siempre quede abajo del todo de la pantalla, asi la imagen tambien estara abajo del todo con el codigo que he puesto antes. Gracias de nuevo!

Última edición por CorpseOfSteel; 17/01/2009 a las 05:59
  #2 (permalink)  
Antiguo 17/01/2009, 09:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear imagen a pie de pantalla

Cita:
Iniciado por CorpseOfSteel Ver Mensaje
EDITO: Tambien me serviria alguna forma para alinear el footer de manera que siempre quede abajo del todo de la pantalla, asi la imagen tambien estara abajo del todo con el codigo que he puesto antes. Gracias de nuevo!
Quizá te sirva esta entrada de las FAQ http://www.forosdelweb.com/f53/faqs-...ml#post2576668
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 17/01/2009, 10:08
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: Alinear imagen a pie de pantalla

Cita:
debajo del todo de la pantalla
Entonces tenes que definir un footer, aca un ejemplo de footer:

#footer {
clear: both;
width:750px;
text-align:center;
margin-left:auto;
margin-right:auto;
margin:0 auto;
height: 65px;
background-color: #ffffff;
}

Ahi metes tu imagen
__________________
Salu2!
  #4 (permalink)  
Antiguo 22/01/2009, 06:39
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Respuesta: Alinear imagen a pie de pantalla

Gracias por vuestros comentarios!

El footer ya queda siempre debajo de la pantalla, pero la imagen de fondo no se ha bajado con él.

Alguien sabe como hacer lo mismo con la imagen? El caso es que la imagen no esta en el HTML, sino en el background del body del CSS

Es una imagen que ocuparía todo el fondo de la web, no solo el espacio del footer

Gracias
  #5 (permalink)  
Antiguo 29/01/2009, 17:25
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Respuesta: Alinear imagen a pie de pantalla

Up!! haber si alguien pudiera echarme una mano :)
  #6 (permalink)  
Antiguo 29/01/2009, 17:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear imagen a pie de pantalla

Lee tu propio mensaje y verás que es imposible saber de qué hablas. Sin un enlace, código ni una expicación clara para quien no lo haya visto nunca, es imposible,
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 30/01/2009, 00:30
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Alinear imagen a pie de pantalla

Disculpa Mikmoro, pero está claro:
Up se refiere a una url que tiene en php, posicionada con Css2 !! haber es la variable que tiene asignada en el if si... Hum... creo que no
  #8 (permalink)  
Antiguo 30/01/2009, 03:13
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Respuesta: Alinear imagen a pie de pantalla

Gracias por responder, creía que en mi primer mensaje se entendía, pero bueno aqui pongo una imagen haber si ahora se entiende mejor. La cosa es poner una imagen de fondo que quede siempre pegada al margen inferior de la pantalla. Tengo puesto el codigo que puse en el primer post

http://img136.imageshack.us/img136/3...lemacsscb8.jpg

Gracias
  #9 (permalink)  
Antiguo 30/01/2009, 03:24
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Alinear imagen a pie de pantalla

Hum, perdón CorpseOfSteel. A mí se me transpapelaron las tuercas. Estaba leyendo otro post y me revolví, sorry. (y todavía de menso yo me pongo a cotorrear en vez de leer lo de arriba)

No, sí se entiende.
El fondo en el background te funciona solo si no tienes que hacer scroll, de lo contrario mejor en el fondo pones un background al footer, para que este esté realmente en el footer, luego el código para que el footer esté abajo.

Aparte de las soluciones que te han dado te doy un link a una otra opción. Esta, como te comento, usa en el footer lo que necesites dentro.

http://www.cssstickyfooter.com/

(La documentación en español ya mero la tienen)
  #10 (permalink)  
Antiguo 30/01/2009, 03:31
(Desactivado)
 
Fecha de Ingreso: noviembre-2007
Mensajes: 54
Antigüedad: 10 años
Puntos: 0
Respuesta: Alinear imagen a pie de pantalla

Hola. Yo te recomiendo que pases a hacer un rediseño de 2 columnas. la Superior y, la inferior incluyendo la imagen de fondo.

Saludos.
  #11 (permalink)  
Antiguo 30/01/2009, 04:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear imagen a pie de pantalla

Sigo sin tener bien claro lo que buscas, porque no he visto tu código, pero si tienes la imagen como fondo del body, donde hayas puesto la imagen añade bottom center:

body {background: url(imagen/ituimagen.jpg) no-repeat bottom center;}
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 30/01/2009, 16:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Alinear imagen a pie de pantalla

Hola.

Yo no entiendo si quieres la imagen como fondo de toda tu página o como fondo del footer.

Saludos.

  #13 (permalink)  
Antiguo 31/01/2009, 06:08
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Respuesta: Alinear imagen a pie de pantalla

Cita:
Iniciado por jomaruro Ver Mensaje
Hola.

Yo no entiendo si quieres la imagen como fondo de toda tu página o como fondo del footer.

Saludos.

Gracias a todos por responder. La imagen ocupa todo el fondo de la pagina

Cita:
Iniciado por Mikmoro Ver Mensaje
Sigo sin tener bien claro lo que buscas, porque no he visto tu código, pero si tienes la imagen como fondo del body, donde hayas puesto la imagen añade bottom center:

body {background: url(imagen/ituimagen.jpg) no-repeat bottom center;}
Ese es el codigo que tengo puesto, pero la imagen solo llega hasta el final del contenido, no hasta el final de la pantalla

Cita:
Iniciado por Rafael Ver Mensaje
Hum, perdón CorpseOfSteel. A mí se me transpapelaron las tuercas. Estaba leyendo otro post y me revolví, sorry. (y todavía de menso yo me pongo a cotorrear en vez de leer lo de arriba)

No, sí se entiende.
El fondo en el background te funciona solo si no tienes que hacer scroll, de lo contrario mejor en el fondo pones un background al footer, para que este esté realmente en el footer, luego el código para que el footer esté abajo.

Aparte de las soluciones que te han dado te doy un link a una otra opción. Esta, como te comento, usa en el footer lo que necesites dentro.

http://www.cssstickyfooter.com/

(La documentación en español ya mero la tienen)
Si tengo que hacer scroll. Pero si pongo la imagen en el footer solo sale en el div del footer, no en la pagina entera. Voy a mirar esa web haber si saco algo. Gracias

Última edición por CorpseOfSteel; 31/01/2009 a las 06:14
  #14 (permalink)  
Antiguo 31/01/2009, 06:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2007
Mensajes: 54
Antigüedad: 10 años
Puntos: 0
Respuesta: Alinear imagen a pie de pantalla

vHola de nuevo. En el enlace que pusiste anteriormente dónde aparecian unas imágenes de la colocación de la imagen de fondo, exisitia un espacio superior en blanco dentro de la página y a continuación verticalmente indicabas la imagen de fondo como si fuese un solo cuerpo o 2 contenedores independientes. Si dices ahora que quieres que te ocupe toda la página, que es ese espacio en blanco que indicas en la imagen descriptiva del enlace colocado en este post anteriormente?.

Según la imagen, si quieres un solo contenedor (1 columna) en tu proyecto tendrás que reformar tu CSS con toda seguridad para lo que pretendes.

Saludos de nuevo.
  #15 (permalink)  
Antiguo 31/01/2009, 07:12
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Respuesta: Alinear imagen a pie de pantalla

Cita:
Iniciado por conmenta1965 Ver Mensaje
vHola de nuevo. En el enlace que pusiste anteriormente dónde aparecian unas imágenes de la colocación de la imagen de fondo, exisitia un espacio superior en blanco dentro de la página y a continuación verticalmente indicabas la imagen de fondo como si fuese un solo cuerpo o 2 contenedores independientes. Si dices ahora que quieres que te ocupe toda la página, que es ese espacio en blanco que indicas en la imagen descriptiva del enlace colocado en este post anteriormente?.

Según la imagen, si quieres un solo contenedor (1 columna) en tu proyecto tendrás que reformar tu CSS con toda seguridad para lo que pretendes.

Saludos de nuevo.
Hola, perdona si las imagenes no eran claras. Es una imagen que ocupa toda la pagina en una sola columna. El espacio blanco que hay arriva era para indicar que quiero que la imagen este situada al nivel inferior de la pantalla, y no importa si queda un hueco por arriva por ser la imagen mas pequeña que la resolucion de la pantalla. Gracias
  #16 (permalink)  
Antiguo 31/01/2009, 08:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2007
Mensajes: 54
Antigüedad: 10 años
Puntos: 0
Respuesta: Alinear imagen a pie de pantalla

Hola de nuevo. Entiendo por el hilo del post, que necesitas una imagen de fondo en una sola columna que ocupa toda la página con scoll y que esté situada siempre en la parte inferior de la misma.

Deduzco por ello, que lo que no has comentado pero que sí necesitas es que el scoll no sea de un tamaño fijo.. Es decir que pueda aumentar a medida que añadas nuevo contenido en su momento necesario.

Si utilizas imagen de fondo para verticalidad sin un conocimiento previo de las medidas de ésta, tendrías que comentarlo para saber concretamente si la verticalidad de la página no te preocupa que aumente indefinidamente.

Saludos.
  #17 (permalink)  
Antiguo 31/01/2009, 10:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear imagen a pie de pantalla

Cita:
Iniciado por CorpseOfSteel Ver Mensaje
Ese es el codigo que tengo puesto, pero la imagen solo llega hasta el final del contenido, no hasta el final de la pantalla
Lo siento pero si no pones el código que estás usando yo no entiendo nada. ¿Seguro que esa imagen está como background del body? ¿y aun así sólo llega hasta donde termina el contenido? No entiendo, lo siento.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 31/01/2009, 16:10
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Alinear imagen a pie de pantalla

Pon una captura de pantalla, ¿no?
  #19 (permalink)  
Antiguo 31/01/2009, 17:42
 
Fecha de Ingreso: febrero-2008
Mensajes: 48
Antigüedad: 9 años, 10 meses
Puntos: 2
Respuesta: Alinear imagen a pie de pantalla

Lo que deberías poner es el código de la página. De todas formas, entiendo que lo que quieres es una imagen de fondo que no se mueva, y que se quede en el fondo de la página, para ello necesitas la propiedad fixed del fondo

Código:
body {
	background: url('img/fondo.jpg') no-repeat bottom center fixed;
}
A ver si te funciona
  #20 (permalink)  
Antiguo 01/02/2009, 09:08
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 10 años, 4 meses
Puntos: 56
Respuesta: Alinear imagen a pie de pantalla

Muchas gracias a todos por vuestras respuestas y vuestro tiempo

Me di cuenta de que en IE si funcionaba, así que buscando un porqué no funcionaba en Mozilla, añadí este codigo (por si alguien tiene el mismo problema):

Código:
 html {
 	min-height: 100%;
 	height: auto;
}
y ya me funciona en Mozilla

El codigo que tengo puesto, ya lo puse al principio del topic, lo pongo de nuevo para que dejeis de preguntarlo

Código:
body {
	background: url('images/fondo.jpg') bottom center no-repeat;
}
Lo dicho, ya esta resuelto, muchas gracias a todos!!
  #21 (permalink)  
Antiguo 01/02/2009, 09:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear imagen a pie de pantalla

Cita:
Iniciado por CorpseOfSteel Ver Mensaje
El codigo que tengo puesto, ya lo puse al principio del topic, lo pongo de nuevo para que dejeis de preguntarlo
Joder, qué manera de contestar. Me refería TODO el código.

Pero si ya lo has resuelto. pues no se hable más.

Hasta la vista.
__________________
Visita mi nueva web idplus.org
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 17:18.