body background-image siempre hasta abajo.

daPhyre · #1 (**permalink**) 25/01/2010, 01:35

Que terrible tener que preguntar esto, pues estoy casi seguro que el tema se ha tratado decenas de veces y no consigo recordar la respuesta.

Tengo una imagen de fondo en el body que se repite en la parte inferior en x con el siguiente código:

Código CSS:

Ver originalbody{background:#003 url('images/bg.png') repeat-x bottom left}

El problema es que si la página es menor de altura que la pantalla, la imagen se ve a media pantalla en lugar de hasta abajo. ¿Alguien podría decirme como corregir este detalle para hacer que la imagen se vea siempre hasta abajo del navegador en dichos casos?

Jask · #2 (**permalink**) 25/01/2010, 02:36

Es que eso creo que no tiene solución. Me explico. La imagen tiene unas determinadas características en cuanto ancho y alto. Si esta imagen son, por ejemplo 200x200px y lo ves en una pantalla la cual no puede ver "tanta" imagen, siempre se va a cortar hasta que no tenga la medida deseada.
Ten en cuenta que tendría el css que escalar esa imagen al tamaño de la pantalla, y css no puede hacer eso (que yo sepa)

Espero estar equivocándome pero he estado mirando por internet pero no veo ninguna solución al respecto, lo siento :) A ver si algún gurú por aquí te puede ayudar más que yo :D

Saludos !!

Osdiwe · #3 (**permalink**) 25/01/2010, 02:59

Primero, creo que si quieres que la imagen se repita verticalmente debes utilizar repeat-y y no repeat-x.

El tema que estás planteando sería como hacer que la página siempre ocupe como mínimo la altura del navegador, ¿no?

Te dejo un tutorial (en inglés) de como hacer que siempre te ocupe toda la pantalla del navegador. Si no lo entiendes prueba con el traductor de Google o a buscar algo similar:

http://www.webmasterworld.com/forum83/200.htm

kisquian · #4 (**permalink**) 25/01/2010, 14:37

Casi seguro que es repeat solo, y no repeat-x

daPhyre · #5 (**permalink**) 25/01/2010, 22:03

Vaya, creo que he dejado bastantes huecos en mi explicación.

Verán, lo que hago es que mi página está de color azul (el cielo), y en la parte inferior he puesto una imagen que se repite en x de manera horizontal, que es el patrón del pasto, para que parezca el suelo. Esto se ve excelente cuando la página es más grande que la pantalla, pero si esta es más chica, el pasto se ve a la altura donde termina el contenido de la página, quedando "a medio cielo", bastante raro :S

Había intentado originalmente un body{height:100%}, pero no hizo ningún efecto. Probando suerte con algo nuevo, he intentado un html, body{height:100%}, y esto parecía habermelo resuelto, pero al ver las otras páginas, descubrí que causaban exactamente lo contrario, pues ahora el pasto quedaba a medio aire cuando la página era más grande que la pantalla, lo cual no se veía nada bien.

Seguiré indagando, y si alguien conoce la respuesta en el entre-tanto, agradeceré su respuesta. Un agradecimiento a todos los que probaron ayudarme.

Osdiwe · #6 (**permalink**) 25/01/2010, 22:27

Cita:

Iniciado por Osdiwe

El tema que estás planteando sería como hacer que la página siempre ocupe como mínimo la altura del navegador, ¿no?

Te dejo un tutorial (en inglés) de como hacer que siempre te ocupe toda la pantalla del navegador. Si no lo entiendes prueba con el traductor de Google o a buscar algo similar:

http://www.webmasterworld.com/forum83/200.htm

Creo que para lo que pides ya te dejé respuestas. ¿Lo has probado?

daPhyre · #7 (**permalink**) 25/01/2010, 22:29

Cita:

Iniciado por Osdiwe

Creo que para lo que pides ya te dejé respuestas. ¿Lo has probado?

Lo he hecho, prácticamente habla del "body{height:100%}", pero como ya he dicho antes, esto no lo soluciona. Además, el artículo se enfoca principalmente en columnas del alto de la pantalla, cuando mi problema es el fondo de imagen del body en la parte inferior. De igual forma, muchas gracias.

daPhyre · #8 (**permalink**) 26/01/2010, 00:02

¡Encontré la solución! Fue mucho más simple de lo que pensé, y todo parece indicar que funciona a la perfección en Google Chrome, Firefox y... (Milagrosamente) ¡Internet Explorer! Lo probé con la 8, de los anteriores ni me preocupo por que ya de por si lo hacía como deseaba sin nada extra... Uno de los tantos errores de los que a veces podíamos beneficiarnos.

Bien, la línea mágica que salvó mi existencia (y por si a alguien más le hace falta en un futuro), es la siguiente:

Código HTML:

html, body{margin:0;padding:0;min-height:100%}

Gracias a todos los que probaron ayudarme, ya que sin sus ideas, no hubiera terminado con esta disparatada idea que resultó a la perfección. Saludos a todos.

Osdiwe · #9 (**permalink**) 26/01/2010, 00:04

Gracias por aportar la solución. Aunque min-height no es soportado por algunas versiones anteriores de Explorer. Solo lo digo porque si alguien utiliza esta linea de código no olvide poner el hack para IE6.

Impostor · #10 (**permalink**) 26/01/2010, 05:15

Creo que mas de uno tiene que repasar algo de css...

Cita:

Por otra parte, los valores repeat-x y repeat-y permiten repetir la imagen de fondo sólo en una dirección (horizontal o vertical). El valor repeat-x repite la imagen de forma horizontal......La imagen de fondo repetida horizontalmente se muestra por defecto en la parte superior del elemento. Utilizando la propiedad background-position es posible desplazarla a otra posición.

Mas ampliado aqui.

Saludos¡¡

daPhyre · #11 (**permalink**) 26/01/2010, 12:44

Cita:

Iniciado por Impostor

Creo que mas de uno tiene que repasar algo de css...

Me quedó la duda, ¿A quién mandabas este mensaje? No noté que ninguno de los que pusieron algún comentario ignoraran lo que has puesto. Saludos.

jomaruro · #12 (**permalink**) 26/01/2010, 17:52

Hola:

Cita:

Iniciado por Osdiwe

Primero, creo que si quieres que la imagen se repita verticalmente debes utilizar repeat-y y no repeat-x.

Creo que Osdiwe no te había entendido bien, no se dió cuenta de que querías repetir la imagen horizontalmente.

Saludos.

Osdiwe · #13 (**permalink**) 27/01/2010, 03:11

Cita:

Iniciado por jomaruro

Hola:

Creo que Osdiwe no te había entendido bien, no se dió cuenta de que querías repetir la imagen horizontalmente.

Saludos.

Tienes toda la razón jomaruro. Creo que me despistó esta parte:

Cita:

Iniciado por daPhyre

¿Alguien podría decirme como corregir este detalle para hacer que la imagen se vea siempre hasta abajo del navegador en dichos casos?

Más que repasar algo de css debo dejar de reponder posts mientras trabajo jejej

alexk · #14 (**permalink**) 27/01/2010, 18:56

daPhyre
porque min-height:100% y no height:100% a secas?

daPhyre · #15 (**permalink**) 27/01/2010, 22:04

Por que si solo uso height:100%, si la página tiene un contenido mayor al de la pantalla, la imagen se queda atorada en el punto menor original al deslizar el scroll hacia abajo. De esta forma, si la página es menor al 100% de la pantalla, la imagen quedará abajo, pero si la página es mayor al 100% de la pantalla, la imagen aparecerá hasta llegar al punto más bajo de la página.

alexk · #16 (**permalink**) 27/01/2010, 23:23

en tiendo... llevas razon...
nunca lo eh necesitado hasta ahora me gustaria ver en que lo aplicaste claro si se puede jeje... chao suerte!...

Osdiwe

Cita:

min-height no es soportado por algunas versiones anteriores de Explorer. Solo lo digo porque si alguien utiliza esta linea de código no olvide poner el hack para IE6.

Cierto... pero nop en este caso

daPhyre

Cita:

¡Encontré la solución! Fue mucho más simple de lo que pensé, y todo parece indicar que funciona a la perfección en Google Chrome, Firefox y... (Milagrosamente) ¡Internet Explorer! Lo probé con la 8, de los anteriores ni me preocupo por que ya de por si lo hacía como deseaba sin nada extra... Uno de los tantos errores de los que a veces podíamos beneficiarnos.

es verda el body, tiende a interpretarlo diferente IE...

jomaruro · #17 (**permalink**) 28/01/2010, 16:46

Hola:

Cita:

Iniciado por Osdiwe

Más que repasar algo de css debo dejar de reponder posts mientras trabajo jejej

¿has pensado en dejar de trabajar mientras respondes?

Saludos.

Osdiwe · #18 (**permalink**) 29/01/2010, 05:10

Cita:

Iniciado por jomaruro

¿has pensado en dejar de trabajar mientras respondes?

Mucho mejor

daPhyre · #19 (**permalink**) 29/01/2010, 14:12

Cita:

Iniciado por alexk

nunca lo eh necesitado hasta ahora me gustaria ver en que lo aplicaste claro si se puede jeje... chao suerte!...

http://daphyre.net/bottom-background-img.html

Perdón por el retraso, pero quería poner los tres ejemplos en uno solo para que vieran (de forma interactiva gracias a JavaScript), como ocurre en cada uno de los tres casos, tanto con poco texto como con mucho texto.

Como verán, los que tenga IE6, y creo que IE7 también, aun sin ningún código, ya hacía lo que buscaba sin mover un dedo... Uno de sus errores naturales que ya corrigieron en IE8.

Gracias a todos!

alexk · #20 (**permalink**) 29/01/2010, 14:51

ahhhh ahora si ya entiendo...
aver si tocara usarlo una vez.... gracias :)

delta_hel · #21 (**permalink**) 13/07/2012, 14:30

Cita:

Iniciado por daPhyre

¡Encontré la solución! Fue mucho más simple de lo que pensé, y todo parece indicar que funciona a la perfección en Google Chrome, Firefox y... (Milagrosamente) ¡Internet Explorer! Lo probé con la 8, de los anteriores ni me preocupo por que ya de por si lo hacía como deseaba sin nada extra... Uno de los tantos errores de los que a veces podíamos beneficiarnos.

Bien, la línea mágica que salvó mi existencia (y por si a alguien más le hace falta en un futuro), es la siguiente:

Código HTML:

html, body{margin:0;padding:0;min-height:100%}

Gracias a todos los que probaron ayudarme, ya que sin sus ideas, no hubiera terminado con esta disparatada idea que resultó a la perfección. Saludos a todos.

Muchas gracias por tu acertada respuesta, que aunque lleva ya tiempo me ha servido ahora con un problema que no se me había presentado.