bottom que no se va al bottom

24/may/2011 11

Este es un fix corto y preciso. En browsers modernos (¡sí, tal como leíste esto no afecta IE6 ni IE7!) la propiedad background-position no funciona como uno espera.

La condición dice:


Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu sitio no llega hasta el fondo de la ventana, la imagen de fondo llegará sólo hasta donde llegue el contenido.

Ver ejemplo 1

Para solucionarlo, basta con definir:

html {
   height: 100%;
}

Ver ejemplo 2

Ahora, esta solución es útil cuando sabes que el contenido es y será menor al alto de la ventana; si tu contenido es dinámico es mejor que utilices min-height:

html {
   min-height: 100%;
}

Ver ejemplo 3

Gracias a inyaka por hacerlo notar.

Comentarios

  1. Macalha [#]

    Hola compa !

    Creo que te engañaste de tag…

    Leyendo el codigo del ejemplo, la tag que debe recibir altura de 100% es HTML y no HEAD

    Saludos !

  2. Jorge Epuñan [#]

    toda la razón Macalha, arreglado gracias!

  3. Fabian [#]

    ¿Funciona con ie6?

  4. Jorge Epuñan [#]

    Fabian: tal problema con background-position: bottom no se produce ni en IE6 ni en IE7.

  5. inyaka [#]

    a pesar de que este blog es genial y me gusta mucho tu trabajo…
    existe un error en el articulo:

    si defines height: 100%; cuando el contenido supere ese 100% la imagen seguira en el 100% original, solución

    min-height: 100%;

  6. Jorge Sousa [#]

    Muy bien Jorge, pero por el momento me hace más falta el scripts de las alturas del navegador.
    Aprovecho esta oportunidad para felicitar los internautas chilenos. De acuerdo con Stat Counter, Chrome Browser es el más utilizado en Chile.

  7. Janoma [#]

    Hay que decir que esto no es un bug. El comportamiento del navegador para background-position: bottom en tu imagen (la que dice “fail”) es exactamente el que corresponde, pues está alineado con el límite inferior del contenido. El contenido y la ventana del navegador son cosas distintas.

  8. Eduardo [#]

    Coincido con @Janoma; esto no es un bug, sino que un problema de definición; justamente, ventana y contenido son dos cosas distintas.

    Que IE6-IE7 lo lean así… Es tan legal como el box model de ellos.

  9. Jorge Epuñan [#]

    inyaka: muchas gracias, corregido y con nuevo ejemplo.

  10. Jorge Epuñan [#]

    Janoma y Eduardo: concuerdo que no es un bug y sólo un error de definición, pero muy arbitrario ya que como pueden ver en el ejemplo 4 realmente por CSS <body> tiene el borde en rojo sólo donde existe contenido, pero si pongo una imagen como background y la repito como mosaico ésta se repite en toda la ventana y no sólo donde hay contenido.

    Reemplace el bug por el fix en el texto del artículo para no causar más confusión.

    Salu2 y gracias a ambos.

  11. findeciclo [#]

    Ahh.. y sí alguien requiere de un Bg adaptable a toda la pagina puede recurrir a jquery

    $.ezBgResize({
    img : “image/bg.jpg”, // Required.
    opacity : 1, // Optional. Default is 100% (1).
    center : true // Optional. Default is true.
    });

    y cargando esto en el server

    jquery.ez-bg-resize.js

    por supuesto anclarlo en el de tu página…

    gracias

Responder a Jorge Sousa ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab