Colocar un fondo en una página web
Para incluir un fondo en una página web necesitamos utilizar el atributo
background en la etiqueta <BODY>, al que le asignamos el nombre
del archivo que deseamos utilizar como fondo. Si el archivo se encuentra
en un directorio distinto que la página web, necesitaremos incluir la
ruta al archivo, teniendo en cuenta siempre de utilizar una ruta
relativa al archivo .html para que se conserve la ruta en caso de que
cambiemos el sitio web de localización.
<body background="fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la
página como fondo. Por defecto, la imagen de fondo aparece como un
mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las
tablas o las celdas, por ejemplo. Se utiliza el mismo atributo
background, aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Consejos para utilizar fondos
Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de imagen.
1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo
bgcolor para asignar un color de fondo parecido al predominante en la
imagen que compone el mosaico. Posiblemente muchos de nosotros habremos
accedido a una página en la que no se ve nada y, cuando se carga el
fondo, nos damos cuenta que sí que había texto en la página, lo que
ocurre es que no se veía porque no contrastaba con el color de fondo
blanco por defecto. Es posible que en estos casos la imagen de fondo
fuera oscura y que el texto fuera blanco y, hasta que no se carga la
imagen de fondo, no se puede ver nada. Este problema se agrava si el
fondo no se llega a cargar por un error en la transferencia del archivo o
porque la imagen ha sido borrada del servidor accidentalmente.
2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en
la lectura de los textos. Es un error muy común utilizar un fondo que
luego molesta al leer los textos. Ya es bastante difícil leer una web en
un monitor como para que encima el texto no contraste bien con el fondo
que se está utilizando. En este caso cabe indicar también que es muy
importante que las combinaciones de color del texto y del fondo sean
agradables, ya que hay ciertos colores que, aunque contrastan bien,
provocan unas combinaciones difíciles de leer, por ejemplo un fondo con
un color azul predominante y el texto en rojo.
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen
se utilicen colores de una misma gama. Si la imagen tiene partes oscuras
y claras, ¿de qué color pondremos el texto para asegurarnos de que se
lea bien siempre? Si el texto es claro no contrastará bien con las
partes del fondo que también son claras. Igual pasará si colocamos el
texto con un color oscuro, que no contrastará bien con las partes
oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un
tamaño de ventana variable. A veces un fondo se comporta bien con una
definición dada, pero no con otras mayores. Ocurre muy a menudo que se
utiliza un fondo y se ve el resultado en una ventana de 800x600 ó
1024x768. Luego accede una persona con una definición de 1280x1024, o
superior, y ve la página incorrectamente porque se realiza un mosaico
con el fondo que no había tenido en cuenta el desarrollador.
5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo
tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos
pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico
repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo
hubiese sido un poco más grande, para realizar el mosaico hubiera
trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos,
puesto que pueden dificultar mucho la presentación de la información en
la página de una manera clara.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea
para asegurarnos que los textos se visualicen correctamente es colocar
todo el contenido de la página dentro de una tabla y asignarle a la
tabla un color de fondo con el atributo bgcolor.
<html>
<head>
<title>Fondo de prueba</title>
</head>
<body background="fondo1.jpg" bgcolor="FFCECB">
<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>
<h1 style="color:000000">Probando...</h1>
<br>
Este texto se lee bien porque tiene un fondo plano.
<br>
</td>
</tr>
</table>
</body>
</html>
No hay comentarios.:
Publicar un comentario