Imágenes de Fondo

Profesores:JAB y Ester Torres

Las palabras mágicas

En HTML5 existen algunas propiedades CSS que nos permiten añadir fondos de página, ya sea de un simple color (opaco o con transparencia), una imagen o múltiples imágenes una encima de la otra.
Color de fondo
Para especificar un color de fondo, ya sea para todo el html, o sólo para un <div> o sección del html utilizamos la propiedad background-color:
header{
   background-color:#E3D193;
}
Color de fondo semitransparente
Si deseamos especificar un color con un determinado índice de transparencia y queremos utilizar el código de color RGB, podemos usar la siguiente variante, en la que el 4º valor (0.4 en el ejemplo anterior) es la cantidad de transparencia (siendo 0 la transparencia total y 1 la opacidad total).
   background-color:rgba(255,255,0,0.4);
Imagen de fondo
Si además queremos añadir una imagen de fondo (para todo el <body>, o únicamente como fondo de un <div>), usaremos la propiedad: background-url:
#explicacion{
   background:url('../imagenes/imagen.png');
}
Con el código del ejemplo superior hemos añadido un mosaico de una imagen como fondo únicamente del <div> llamado 'explicacion', que es la zona azul que se muestra a continuación:

Es muy importante tener en cuenta el tema de las rutas hacia las imágenes. Si utilizamos un fichero CSS externo, todas las rutas empiezan desde la carpeta donde se encuentra el fichero CSS, mientras que si el código CSS se encuentra dentro del fichero html, la ruta para encontrar la imagen empieza desde la carpeta donde está guardado el fichero html.
Así, si la imagen se encuentra en la misma carpeta que el fichero CSS se indicaría únicamente el nombre de la imagen. Por el contrario, si como es habitual, el fichero CSS se encuentra en una carpeta y la imagen en otra diferente, para encontrar la imagen desde la carpeta CSS, primero se debe salir de dicha carpeta (utilizando ../), para posteriormente entrar en la carpeta de imágenes (imagenes/) y por último indicar el nombre de la imagen con su extensión correspondiente (imagen.png).
(Puedes hacer clic en la imagen para acceder al ejemplo)


Si no añadimos ningún otro parámetro la imagen se irá repitiendo hasta ocupar toda la ventana html (tipo mosaico). Si por el contrario únicamente queremos que se repita una sola vez (horizontal o verticalmente), tenemos que utilizar la propiedad background-repeat:
#explicacion{
  background:url('../imagenes/imagen.png');
  background-repeat: repeat-y;
}
Con este código la imagen se repite (sólo) verticalmente en la parte izquierda de la pantalla, tal y como se puede apreciar en el siguiente ejemplo.

Como posibles valores para background-repeat encontramos:




Otro parámetro que podemos utilizar es background-size, que sirve para determinar el tamaño de la imagen. No obstante, se recomienda siempre que se utilice el tamaño 100% de la imagen. Resulta tremendamente inapropiado crear una imagen el doble de grande y posteriorme reducirla utilizando este parámetro. Es mucho mejor, más rápido, más fiable y más inteligente crear la imagen al tamaño en el que se tendrá que mostrar la imagen.

No obstante, para el resto de casos, podemos especificar el tamaño en píxeles o en porcentaje (respecto al tamaño total de la pantalla) utilizando únicamente uno de esas dos declaraciones CSS: 
  background-size:200px 100px;
  background-size:25%;

Superposición de múltiples imágenes como fondo

Como novedad, en HTML5, ahora tenemos la posibilidad de construir un fondo de pantalla o de un <div> superponiendo diferentes imágenes individuales (como si fueran capas en Photoshop).
(Haz clic en la imagen para acceder al ejemplo) 
body{
  background:url('../img/css.png'), url('../img/rayas3.png'), url('../img/infantil.gif');
}
(El escudo en grande con el título "CSS" en su parte superior que hay en la parte central del ejemplo no forma parte del fondo, sino que correspondería al contenido de la página, colocada en este caso únicamente como ornamento).

En este ejemplo se utilizan 3 imágenes superpuestas entre sí para formar un fondo común. El orden de indicación de las imágenes es muy importante, ya que de esta manera se define el orden de apilamiento, es decir, así se especifica qué imagen estará por encima de las otras. Así, la primera imagen (css.png) se colocará por encima de las restantes, mientras que la última (infantil.gif) estará por debajo de todas ellas.

Es evidente que esta técnica tiene su lógica cuando al menos las primeras imágenes tienen fondo transparente, ya que sino la primera imagen (con fondo opaco) taparía totalmente las imágenes que hubieran quedado por detrás.

En este ejemplo, el fondo infantil es totalmente opaco, igual que el escudo (que está en el centro de una imagen con fondo transparente dentro de un lienzo mucho más grande que el propio escudo), mientras que el fondo azul es semitransparente, lo que le da una tonalidad azulada al fondo infantil, que queda por debajo.

Extras

Tenemos dos posibilidades extras que nos permiten: