1. Introducción

Además de aplicar estilos a los textos, gracias al CSS podemos conseguir muchos más efectos, como insertar imágenes de fondo y cambiar el cursor del ratón.

2. Imágenes de fondo

La propiedad background-image se puede aplicar a una gran cantidad de etiquetas y consigue que se muestre una imagen de fondo.

Su formato es el siguiente, aplicada por ejemplo al cuerpo de la página:

body { background-image: url("images/fondo.png"); }

El resultado sería que en toda nuestra página aparecería la imagen fondo.png.

Si la imagen es más pequeña que el documento, ésta se repetirá tanto como haga falta para rellenar todo el espacio.

Pero no siempre nos va a interesar que la imagen se reproduzca indefinidamente. Por ello, a continuación de la url podemos indicar el modo de repetición a través de la propiedad background-repeat:

• repeat: para que se repita. Es el valor predefinido, por lo que lo podemos omitir.
• repeat-x: para que sólo se repita horizonalmente, no verticalmente.
• repeat-y: para que se repita en el eje vertical.
• no-repeat: para que no se repita nunca.

Por ejemplo, para que sólo se repita verticalmente añadiríamos esta línea:

body { background-color: #DEB0A0; background-image: url("img/fondo1.jpg"); background-repeat: repeat-y; }

El resultado es que la imagen sólo aparece en el eje vertical y se rellena el espacio restante con el color definido #DEB0A0.

2.1. Fondo fijo

En los casos en los que la imagen no debe ocupar todo el fondo podemos emplear la propiedad background-attachment para controlar la posición de la imagen, con los siguientes valores:

scroll: la imagen se desplazará al desplazarnos arriba y abajo cuando el documento sea largo. Es el valor predeterminado.

fixed: la imagen se queda fija aunque nos desplacemos hacia abajo.

local: similar al anterior, aunque la imagen está fijada al contenido del elemento en lugar de al propio elemento.

Para comprender el uso de esta propiedad, lo mejor es probar esta regla:

body {
  background-color: #DEB0A0;
  background-image: url("img/fondo1.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  }

Al bajar en el documento la imagen se queda fija en el fondo, en lugar de desaparecer, que sería el comportamiento estándar.

2.2. Colocación del fondo

La propiedad background-position se emplea para ubicar el fondo a nuestro gusto, mediante los valores x e y, ya sea en formato de píxeles, mediante porcentajes o mediante indicaciones de posición (center, top, bottom, right o left).

Por ejemplo:

body {
  background-color: #DEB0A0;
  background-image: url("img/fondo1.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom right;
}

La imagen se desplazaría a la esquina inferior derecha (bottom right)

2.3. La propiedad background

Como sucedía con la propiedad font, podemos fusionar todas las propiedades relacionadas con los fondos en una sola mediante background.

El ejemplo que hemos venido realizando se podría expresar también de esta manera:

body { background: #DEB0A0 url("img/fondo1.jpg") no-repeat fixed bottom right; }

En primer lugar indicamos el color de fondo, si no queremos que aparezca ningún color indicaremos el término transparent. Luego viene la dirección de la imagen, seguida de los diferentes parámetros que hemos visto.

3. Apariencia del cursor

Un último recurso gráfico lo obtenemos con la propiedad cursor. Asignando diferentes valores, podremos conseguir que el puntero del ratón tome la apariencia que queramos entre una extensa lista de posibilidades:

img.botones {cursor:hand;}
span.ayuda {cursor:help;}
div.esperar {cursor:wait;}

En los tres ejemplos anteriores conseguimos que el cursor se convierta, respectivamente, en una mano al pasar sobre una imagen de la clase botones, el icono de ayuda al pasar sobre un span etiquetado como tal y el reloj de arena habitual, al pasar sobre un bloque de la clase esperar.

De todas las opciones posibles, sin duda la de hand es la más empleada para simular botones con imágenes, pero también tenemos otras muchas posibilidades que se describen por si mismas, como text, default (el predeterminado), progress, move, crosshair (una cruz), etc. Incluso podemos definir nuestro propio puntero indicando una URL, como hacíamos con las imágenes.

• Ha llegado el momento de que demuestres lo aprendido. Puedes visitar estas dos webs para obtener más información y ejemplos de cómo usar los estilos:
  • http://msdn.microsoft.com/es-es/library/ee371223(v=expression.40)
  • http://msdn.microsoft.com/es-es/library/ee371193(v=expression.40)
• Crea un nuevo documento HTML y guárdalo como misformatos2.htm.
• Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
• Añade las etiquetas meta para el autor, descripción y palabras claves.
• Añade la etiqueta de título con el texto "Mis formatos 2".
• Escribe en el documento el siguiente texto dentro del <body>: "Si paso el ratón por aquí el cursor se transformará y parecerá que estoy esperando"
• Aplica los estilos necesarios para que al pasar con el ratón por encima del texto este parezca que está esperando.
• Aplica los estilos necesarios para que el documento tenga de color de fondo el rojo, y una imagen de fondo pequeña que esté en internet (no te la puedes copiar a tu ordenador) y que se repita sólo en el eje Y.
• Sube el archivo misformatos2.htm a la plataforma.