Imágenes de fondo

Las posibilidades que nos ofrece el lenguaje HTML para cambiar la apariencia de una página no se limitan a cambiar los colores, también se pueden poner imágenes ya sean dibujos o fotos como fondo de una página. Las imágenes deberán estar en formato GIF o JPEG al igual que las imágenes normales que aprendimos a insertar en el capítulo 2.

Para incluir una imagen de fondo deberemos usar el atributo BACKGROUND de la etiqueta BODY. Como habrá podido comprobar el lector a estas alturas dentro de esta etiqueta se engloban todos los parámetros que cambian las características globales de la Web, es decir aquellas que afectan a toda la página.

El funcionamiento de BACKGROUND es idéntico al del atributo SRC de la etiqueta IMG, esto es, deberemos indicar como valor el nombre de la imagen, junto con su ruta de directorios (path) si es necesario o bien la dirección completa de Internet (URL) si no se encuentra en nuestro sitio Web.

Veamos un primer ejemplo de una página con una imagen de fondo, para ello usamos el siguiente código en el que hemos usado la imagen fondo1.jpg que se encuentra en el mismo directorio que la página donde está el código:

En la figura 5.4 podemos ver el resultado en el que hemos incluido, además, un encabezado que contraste con el fondo.

Figura 5.4. Para crear un mayor impacto visual podemos usar como fondo una imagen, esta imagen se replicará (es puesta en mosaico) por toda la página, luego los bordes deben coincidir.

Las imágenes que insertemos como fondo de la página serán mostradas en mosaico, es decir, se replicará la imagen tanto horizontal como verticalmente hasta ocupar todo el área de la página. Por esta razón no todas las imágenes quedan bien como fondo de una página Web. De hecho se recomienda que sólo se usen dos tipos de imágenes:

• Imágenes con pocos colores que muestran un logo sobre un relleno sólido y que interfiere poco con el contenido de la página. En la Web de la figura 5.5 podemos ver un ejemplo de este tipo de imágenes en la que no se aprecian los bordes de la imagen al ser el fondo de esta de un solo color sólido (gris oscuro en este caso).

Figura 5.5. En esta ocasión la imagen de fondo es un logo sobre un fondo de color sólido (gris). Esta es una manera sencilla para que no se noten los bordes cuando el navegador la pone en mosaico.

Imágenes especiales cuyos bordes encajan perfectamente y parece que todo del fondo es una única imagen. La imagen de la figura 5.4 es un ejemplo de ello ya que su tamaño real es de 90×90 pixeles. En la figura 5.6 vemos esa imagen por sí sola. Es difícil apreciar que los bordes encajarán cuando se creen las réplicas, de hecho ese efecto debe ser hecho con programas especiales.

Figura 5.6. Esta es la imagen usada como fondo en la página de la figura 5.4. Como vemos, es de pequeño tamaño, pero al coincidir sus bordes simula una imagen que ocupa toda la pantalla.

Por lo general la creación de fondos requiere además de programas especiales, bastante cuidado para asegurarnos que no sobrecarguen demasiado la página, por lo que un gran número de programadores de Webs optan por usar alguno de los fondos de los cliparts gratuitos que podemos encontrar en Internet, por ejemplo en las direcciones:

• www.specialweb.com
• www.dewa.com
• www.teleportcom

Si usamos una imagen normal como fondo de una página, los bordes no encajarán y se verán claramente los límites de la imagen. Podemos ver un ejemplo de este efecto en la figura 5.7. En esta misma figura vemos también que poner una foto de fondo suele provocar que la página esté demasiado sobrecargada, además sería difícil leer el texto que hubiese en esa imagen.

Figura 5.7. También podemos poner fotos como fondo de la página, pero hay que tener cuidado porque los bordes no encajan y además la página queda demasiado sobrecargada.

No use imágenes demasiado oscuras o con demasiados colores como fondo de la página. Si aún así debe usarla utilice los atributos TEXT, LINK, VLINK y ALINK de la etiquetas BODY para poner colores de texto que permitan que el texto sea legible.

Por último, queremos terminar este apartado con un consejo. Como hemos repetido, la creación de imágenes de fondo es complicada y delicada. Si no las hemos hecho nosotros deberemos elegir bien, en general suelen ser mas apropiadas las imágenes con tonos claros sobre los que se puede leer sin problemas texto negro. Pero antes de incluir la imagen deberemos volver a hacernos unas preguntas ¿Es realmente necesaria? ¿Mejora realmente el aspecto gráfico? que con frecuencia nos hacen ver las cosas más claras. Una vez hemos probado la imagen debemos tener mucho cuidado y hacer pruebas con otras personas para comprobar que el texto de la página se lea bien. Piense que por muy espectacular que sea la página, si no conseguimos que lea lo que tenemos que decir el objetivo no estará cumplido.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1