5.4.Imágenes de fondo

De la misma manera que antes hemos visto como controlar el color de fondo de una página, poniendo el que queríamos, también podemos hacer que se vea como fondo la imagen que se desee. Por supuesto, para evitar los tediosos tiempos de carga, deben ser imágenes sencillas, que se carguen rápidamente. El navegador rellenará con ella toda la pantalla repitiéndola en forma de mosaico tantas veces como sea necesario.

Dado que es un atributo del cuerpo de la página, se especificará dentro de la etiqueta <BODY>. Por ejemplo:

      <BODY BACKGROUND="fondo.jpg">

Podemos ver el efecto que se produce al añadir el fondo a uno de los ejemplos anteriores.

    <!-- Ejemplo 8bis: efecto de una imagen de fondo -->
    <HTML>
    <HEAD>
    <TITLE> Ejemplo 8bis: efecto de una imagen de fondo </TITLE>
    </HEAD>
    <BODY BACKGROUND="fondo.jpg">
    <H1><CENTER><FONT COLOR="red">
    Estos son ejemplos de enlaces locales entre documentos que usan imágenes como
    "puntos calientes" y con una imagen de fondo
    </FONT></CENTER></H1>
    <HR>
    <P> Pulsar aquí para ir al Ejemplo 1 <A HREF="ejem01.htm"><IMG SRC="catalan.gif"></A>
    para verlo en catalán (¡si estuviera traducido!)
    <P> Pulsar aquí para ir al Ejemplo 2 <A HREF="ejem02.htm"><IMG SRC="castella.gif"></A>
    para verlo en castellano
    <P> Pulsar aquí para ir al Ejemplo 3 <A HREF="ejem03.htm"><IMG SRC="ingles.gif"></A>
    para verlo en inglés (¡si estuviera traducido!)
    <P><A HREF="ejem04.htm">Pulsar aquí para ir al Ejemplo 4</A>
    <P><A HREF="ejem05.htm">Pulsar aquí para ir al Ejemplo 5</A>
    <HR>
    </BODY>
    </HTML>

La imagen necesaria para realizar el ejercicio es , que puede capturarse fácilmente marcándola con el botón derecho y aceptando la opción de guardarla que ofrece el navegador.

Debe escribirse en un procesador de texto cualquiera (puede copiarse directamente desde aquí), grabarlo con el nombre que se quiera, sin formato (texto puro), con la extensión HTM, y leerlo luego con un navegador. Se observará claramente la diferencia que hay entre el código fuente y lo que luego aparece realmente en la pantalla, y se probarán todos los enlaces definidos, observando cómo trabajan las imágenes incorporadas y el efecto producido por el fondo añadido. Si se desea comprobar el resultado, puede hacerse aquí. Como siempre, se ha de tener en cuenta que al salir de los ejemplos se retrocederá a la página desde donde se llamaban, por lo que será mejor utilizar los botones de retroceso suministrados por el propio navegador.