Foros del Web » Diseño web » CSS »

body background-image siempre hasta abajo.

Estas en el tema de body background-image siempre hasta abajo. en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 25/01/2010, 00:35
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
body background-image siempre hasta abajo.

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 original
  1. body{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?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 25/01/2010, 01:36
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 759
Antigüedad: 8 años, 4 meses
Puntos: 14
Respuesta: body background-image siempre hasta abajo.

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 !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #3 (permalink)  
Antiguo 25/01/2010, 01:59
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 4 años, 8 meses
Puntos: 16
Respuesta: body background-image siempre hasta abajo.

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
  #4 (permalink)  
Antiguo 25/01/2010, 13:37
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 101
Antigüedad: 5 años, 5 meses
Puntos: 7
Respuesta: body background-image siempre hasta abajo.

Casi seguro que es repeat solo, y no repeat-x
  #5 (permalink)  
Antiguo 25/01/2010, 21:03
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
Respuesta: body background-image siempre hasta abajo.

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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 25/01/2010, 21:27
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 4 años, 8 meses
Puntos: 16
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por Osdiwe Ver Mensaje
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?
  #7 (permalink)  
Antiguo 25/01/2010, 21:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por Osdiwe Ver Mensaje
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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 25/01/2010, 23:02
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
Respuesta: body background-image siempre hasta abajo.

¡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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 25/01/2010, 23:04
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 4 años, 8 meses
Puntos: 16
Respuesta: body background-image siempre hasta abajo.

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.
  #10 (permalink)  
Antiguo 26/01/2010, 04:15
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 6 años
Puntos: 20
Respuesta: body background-image siempre hasta abajo.

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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #11 (permalink)  
Antiguo 26/01/2010, 11:44
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por Impostor Ver Mensaje
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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 26/01/2010, 16:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.456
Antigüedad: 12 años, 2 meses
Puntos: 361
Respuesta: body background-image siempre hasta abajo.

Hola:

Cita:
Iniciado por Osdiwe Ver Mensaje
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.

  #13 (permalink)  
Antiguo 27/01/2010, 02:11
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 4 años, 8 meses
Puntos: 16
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por jomaruro Ver Mensaje
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
  #14 (permalink)  
Antiguo 27/01/2010, 17:56
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.694
Antigüedad: 5 años, 1 mes
Puntos: 136
Respuesta: body background-image siempre hasta abajo.

daPhyre
porque min-height:100% y no height:100% a secas?
  #15 (permalink)  
Antiguo 27/01/2010, 21:04
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
Respuesta: body background-image siempre hasta abajo.

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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #16 (permalink)  
Antiguo 27/01/2010, 22:23
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.694
Antigüedad: 5 años, 1 mes
Puntos: 136
Respuesta: body background-image siempre hasta abajo.

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...
  #17 (permalink)  
Antiguo 28/01/2010, 15:46
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.456
Antigüedad: 12 años, 2 meses
Puntos: 361
Respuesta: body background-image siempre hasta abajo.

Hola:

Cita:
Iniciado por Osdiwe Ver Mensaje
Más que repasar algo de css debo dejar de reponder posts mientras trabajo jejej
¿has pensado en dejar de trabajar mientras respondes?

Saludos.

  #18 (permalink)  
Antiguo 29/01/2010, 04:10
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 4 años, 8 meses
Puntos: 16
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por jomaruro Ver Mensaje
¿has pensado en dejar de trabajar mientras respondes?
Mucho mejor
  #19 (permalink)  
Antiguo 29/01/2010, 13:12
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 5 meses
Puntos: 142
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por alexk Ver Mensaje
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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #20 (permalink)  
Antiguo 29/01/2010, 13:51
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.694
Antigüedad: 5 años, 1 mes
Puntos: 136
Respuesta: body background-image siempre hasta abajo.

ahhhh ahora si ya entiendo...
aver si tocara usarlo una vez.... gracias :)
  #21 (permalink)  
Antiguo 13/07/2012, 14:30
 
Fecha de Ingreso: enero-2010
Mensajes: 2
Antigüedad: 4 años, 7 meses
Puntos: 0
Respuesta: body background-image siempre hasta abajo.

Cita:
Iniciado por daPhyre Ver Mensaje
¡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.

Etiquetas: abajo, body, siempre
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 15:15.
SEO by vBSEO 3.3.2