Crysfel’s Blog

El día de hoy quiero mostrar como poder posicionar correctamente una imagen de fondo, en la parte inferior de la página, es algo muy sencillo, pero de esta manera podré explicar algunos conceptos fundamentales de CSS, con los cuales podrás maquetar mucho mejor, los conceptos a tratar son herencia de medidas relativas, específicamente en la propiedad height, trucos para Internet Explorer 6.

Para poner una imagen de fondo es muy sencillo, simplemente se hace lo siguiente:

Con esa línea anterior, la imagen se ha puesto como mosaico en toda la página, hasta aquí todo bien, ahora le vamos a indicar al explorador, que no queremos que se repita, para esto simplemente ponemos la siguiente línea de código css.

Hasta ahora todo va por buen camino, firefox y explorer 6 están funcionando de la misma manera, mostrando lo que nosotros deseamos, ha llegado la hora de posicionar nuestra imagen de fondo centrada en el eje x, y en el fondo con respecto al eje y, para esto simplemente haces lo siguiente.

Por lógica ya debería estar listo, con estas simples tres líneas ¿verdad? ¡Error! Esto no es suficiente, ¿porque? Lo que sucede es que el height del body, es de cero píxeles, y unos cuantos píxeles de márgenes que depende de cada explorador, ósea que al posicionar la imagen en el fondo, este simplemente debiera “desaparecer”, por que en realidad esta se está posicionando sobre un body que no es visible, sobre un body de cero píxeles, entonces no lo vemos, cuando pongamos texto sobre este, podremos ir viendo cómo es que crece.

Para sorpresa nuestra en IE6 aparece tal como nosotros queremos, y es aquí cuando decimos que FF esta mal, pero en realidad es IE6 quien está mal, aquí muestro las imágenes de los respectivos exploradores.

Para solucionar esto, es necesario especificarle al explorador que el body será del 100% del tamaño, esto lo haces así:

Al agregar esta línea y probar la página, pensaras que te estoy engañando por que no hubo cambio alguno, excepto que en IE apareció la barra de deslizamiento, dando como resultado que lo que queremos hacer se descomponga.

He aquí cuando viene otro concepto básico y fundamental de CSS, y es el hecho de que al body le especificamos que fuese el 100% de alto, como le dimos una unidad relativa, entonces toma el 100% del padre de este, en este caso el nodo padre del body es el HTML, con esto en mente debemos especificarle al padre su height de 100%, ósea de toda la pantalla, esto se hace sencillamente así:

Es importante mencionar que el concepto anterior se aplica para cualquier nodo o elemento del documento, y no solamente para el body.

Ahora podemos ver el resultado, pero he aquí otro pequeño inconveniente, y es que en ambos exploradores aparece la barra de desplazamiento, o scroll, esto es por que existen márgenes entre el body y el html, y también padding, para eliminarlos simplemente hacemos lo siguiente.

Ahora si la imagen esta posicionada correctamente donde queremos, pero ¿Qué sucede cuando le agregamos texto y contenido a la página? He aquí otro pequeño inconveniente, y es que al aparecer la barra de desplazamiento, el largo del body debiera incrementar, y nosotros le hemos especificado que sea de 100% de la pantalla, al sobrepasar el contenido el largo de la pantalla, la imagen se queda con la posición que nosotros le especificamos y no toma las nueva posición que es mas del 100%.

Para solucionar esto es muy sencillo, simplemente cambiamos la propiedad height por min-height, ya que esta última propiedad incrementará de acuerdo al contenido de la página, si el contenido es menor al 100% esta tomará el 100%, y si es mayor al 100% esta tomará el nuevo valor.

Como IE no reconoce esta última propiedad hay que hacer un pequeño truco, lo que sucede es que IE toma height como si fuese min-height, entonces debemos especificarle únicamente a explorer la propiedad height, para esto lo hacemos así:

Este último truco funciona de la siguiente manera, IE es el único explorador que reconoce * html, entonces inmediatamente después de esto, es necesario poner el elemento que queremos modificar, en este caso el body, puede ser un selector u una clase en especifico, entonces dentro del bloque podemos poner el css que queramos aplicar a IE únicamente, todos los demás exploradores ignorarán estas instrucciones.

El código completo es el siguiente.