La base>>Imágenes de fondo

Imagen de fondo

Además de los colores seguro que has visto alguna página que tiene una textura como fondo. Aunque últimamente está empezando a caer en desuso puede ser un recurso interesante para la construcción estética de nuestro sitio WEB.

Lo que hacemos cuando elegimos una imagen para colocarla como fondo de nuestra página es considerar la pantalla como el suelo de una habitación que iremos rellenando desde la esquina superior izquierda con baldosas. Las baldosas serán tan grandes o pequeñas como la imagen que hayamos elegido.

Panel de "Fondo y colores de la página" con imagen de fondoPara elegir la imagen que deseamos utilizar como fondo de la página accederemos al panel que ya conocemos mediante la opción de menú formato submenú colores y fondo de la página.

Si la imagen se encuentra fuera de la carpeta en la que estamos trabajando podemos tener un problema cuando se publique la página, por lo que se recomienda que, antes de insertar una imagen, sea como fondo o como componente de la página, se copie a la carpeta de trabajo o a una subcarpeta que cuelgue de ella.

Si la imagen que deseamos poner de fondo se encuentra en la carpeta o en una subcarpeta de la misma, será muy conveniente marcar Casilla: URL relativa a la ruta de la página para que la referencia no sea la ruta absoluta hasta ella, sino su ruta relativa

Si la página a la que le estamos aplicando el fondo no ha sido guardada todavía verás que no se activa la casilla para indicar que la URL es relativa a la página, ya que al no conocer aún cuál será la ubicación de la misma es imposible establecer rutas relativas hacia ella.

Ruta absoluta:
Llamamos de esta forma a la ruta que recoge la ubicación de un determinado archivo sin tener en cuenta el punto desde el que se solicita la referencia.
Por ejemplo: http://platea.pntic.mec.es/~rluna/index.html
También sería una ruta absoluta una referencia a un archivo dentro de nuestro disco duro del tipo
file:///F:/WEBs/HTML/imagenes/lateralespiral.gif
Ruta relativa: 
En este caso tenemos en cuenta el punto desde el que damos la referencia del tipo imagenes/lateralespiral.gif donde hemos eliminado la referencia inicial e indicamos que, desde el punto donde estamos, encontraremos una subcarpeta en la que estará la imagen lateralespiral.gif
Cuando creamos un sitio WEB es importante que todas las rutas sean relativas para que al hacer una réplica de nuestro sitio en el servidor todas las referencias sigan siendo válidas igual que en nuestro disco duro. Por cierto, supongo que ya te habrás dado cuenta que todos los archivos que formen parte del sitio WEB deben estar en la carpeta principal o en subcarpetas de la misma. (Por utilizar la metáfora de la casa: no podemos guardar trastos en el cuarto del ascensor porque, a lo mejor, en el nuevo edificio que sería el servidor WEB no hay ascensor o está en otro sitio. Todo debe estar en habitaciones situadas de la puerta de casa hacia adentro)

Ni que decir tiene que si tenemos que enviar a alguien a la "casa de un amigo" tendremos que darle la dirección completa para que no se pierda, esto es, la ruta absoluta.

Para hacer la siguiente práctica puedes utilizar alguna de las imágenes que encontrarás en la carpeta imagenes (sin tilde para garantizar la compatibilidad). También puedes recurrir a cualquiera de la multitud de páginas en la red que ofrecen la posibilidad de obtener este tipo de imágenes. Tendremos que "bajarlas" a nuestro ordenador, para lo que pulsaremos con el botón derecho del ratón sobre la imagen que queramos conseguir, y copiarlas en el directorio de trabajo para poder incluirlas en nuestra página. (Aunque se podrían guardar en cualquier directorio resulta más cómodo hacerlo en el directorio en el que estamos trabajando nuestras páginas, para no tener que irlas buscando por todo el disco duro y, además, permitir la creación de rutas relativas que funcionen posteriormente). Puedes probar a bajar alguna imagen para el próximo ejercicio desde ColorVivo

Actividad 19
Actividad 20 Ten en cuenta que ya empieza a haber monitores que utilizan resoluciones bastante altas, por lo que cuando quieras usar una imagen lateral será conveniente que la modifiques para hacerla más larga y evitar las repeticiones horizontales.