Embaldosando Fondos

HTML / Embaldosando Fondos

Embaldosando Fondos
(Background Tiling)

Ahora ense�aremos como usar una imagen (en formatos GIF o JPEG) para "embaldosar" el fondo de tu p�gina. Con esto, queremos decir que el navegador toma una imagen y la usa para cubrir el fondo de una p�gina repitiendo la imagen las veces que sea necesaria. Entonces, cualquier texto e im�genes mostradas en esa p�gina aparecen contra este fondo embaldosado.

Aqu� hay un ejemplo de un embaldosado sutil con un mensaje menos sutil. Un embaldosado bien seleccionado para un fondo puede embellecer la apariencia de tu p�gina, pero la desventaja es que p�ginas embaldosadas generalmente le toman mas tiempo al navegador en cargar.

Obteniendo una Imagen
(Obtaining an Image)

Primero, necesitamos buscar una imagen apropiada para embaldosar un fondo. Usa el navegador para ir a la direcci�n

http://csep10.phys.utk.edu/webcourse/sampletile.html

Guarda la imagen que se muestra en tu expediente bajo en nombre de omisi�n (default a051.jpg).

Embaldosando el fondo de tu P�gina
(Tiling Your Homepage Background)

Ahora busca el archivo de tu p�gina (se asume estar en el mismo expediente en que se archiv� la imagen). Cerca de la parte superior del archivo se ver� una l�nea

<BODY BGCOLOR="#000030"

TEXT="#ff0000" LINK="#00ffff"

VLINK="#00ffff" ALINK="#FF0000">

Edita esta l�nea para entrarle el texto BACKGROUND="a051.jpg" inmediatamente despu�s de <BODY para que la l�nea lea

<BODY BACKGROUND="a051.jpg"

BGCOLOR="#000030" TEXT="#ff0000"

LINK="#00ffff" VLINK="#00ffff"

ALINK="#FF0000">

Nota que el tama�o de la letra no importa para el HTML (as� que background= o BACKGROUND= o hasta BaCkGrOuNd= son iguales para el HTML), pero el nombre de los archivos puede que sea sensitivo al tama�o de la letra, as� que a051.jpg debe ser escrito exacto, en min�sculas.

Guarda los cambios en el archivo y recarga tu p�gina con el navegador. Ahora debes de tener una p�gina con el fondo embaldosado con la imagen que acabas de bajar.

Experimentado Tu Sola(o)
(Experimenting on Your Own)

Puedes experimentar con diferentes embaldosados con simplemente cambiar BACKGROUND="a051.jpg" al nombre de otro archivo GIF o JPEG copiado en tu expediente. Mientras, ten cuidado, no hay ning�n problema experimentando, pero no te antojes de un fondo al que se le hace dif�cil a las personas leer tu p�gina. El dise�ador de p�ginas de la Web siempre debe caminar una fina l�nea entre lo est�tico y la legibilidad.