Alinear imagen a pie de pantalla

[CorpseOfSteel]

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!

[Mikmoro]

Iniciado por CorpseOfSteel

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

[Italico76]

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

[CorpseOfSteel]

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

[CorpseOfSteel]

Up!! haber si alguien pudiera echarme una mano :)

[Mikmoro]

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,

[Rafael]

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

[CorpseOfSteel]

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

[Rafael]

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)

[conmenta1965]

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.

[Mikmoro]

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;}

[jomaruro]

Hola.

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

Saludos.

[CorpseOfSteel]

Iniciado por jomaruro

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

Iniciado por Mikmoro

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

Iniciado por Rafael

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

[conmenta1965]

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.

[CorpseOfSteel]

Iniciado por conmenta1965

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

[conmenta1965]

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.

[Mikmoro]

Iniciado por CorpseOfSteel

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.

[Rafael]

Pon una captura de pantalla, ¿no?

[mediocre]

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

[CorpseOfSteel]

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!!

[Mikmoro]

Iniciado por CorpseOfSteel

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.