Con la propiedad fondo podemos controlar el color de fondo un elemento de la página, establecer imágenes como fondo y decidir su posición dentro de la página y si se repetirán o no.

Color de fondo

Propiedad: background-color

Como todas las propiedades de los fondos podemos aplicarla a toda la página o sólo a un determinado elemento, elgiendo una etiqueta de html como selector para aplicarlo de forma genérica o bien mediante la utilización de clases o selectores id.

Valores: podemos utilizar el nombre o la referencia RGB de un color .

Imagen de fondo

Propiedad: background-image

Valores: podemos utilizar la referencia relativa a una imagen de nuestro propio sitio o bien una referencia absoluta. Con ello podemos hacer que los fondos se apliquen solamente a una determinada porción del documento, en lugar de hacerlo a toda la página. Aunque no deberíamos hacerlo, incluso aunque tuviéramos control sobre la url a la que apuntamos, si usamos referencias absolutas de imágenes en la red solo podremos comprobar el efecto cuando dispongamos de conexión a internet.

La inclusión de una imagen como fondo lleva asociadas tres propiedades que nos permitirán especificar si la imagen se repite, la posición en caso de no repetirse y el desplazamiento vertical si la página ocupa más de una pantalla.

Posición de la imagen

Propiedad: background-position

Valores: Existen varias posibilidades para establecer la posición:

• Posicionamiento absoluto en el que indicaríamos un valor en píxeles indicar las coordenadas en las que se situará el vértice superior izquierdo respecto al vértice superior izquierdo de la ventana. Ver ejemplo
   
• Posicionamiento relativo porcentual: en este caso indicamos la posición en forma de porcentaje respecto a la altura y la anchura ocupadas por el bloque al que se aplica. Ver ejemplo
   
• Posicionamiento relativo mediante palabras reservadas: para ello utilizamos tres términos referidos a la posición vertical que son top, center y bottom (para arriba, centro y abajo respectivamente) y left, center y right para indicar la posición horizontal. (izquierda, centro y derecha). En caso de utilizar un único término no habrá duda ya que son diferentes salvo en el caso de center que provocará que el navegador lo interprete como center center y sitúe la imagen en el medio absoluto de la página. Ver ejemplo

Repeticiones

Propiedad: background-repeat

Valores: Si no especificamos esta propiedad se adoptará el valor por defecto repeat. Podemos también optar por indicar que no se repita con el valor no-repeat (en los ejemplos de posicionamiento se ha utilizado ya esta propiedad) o bien indicar que queremos que se repita en horizontal repeat-x o en vertical repeat-y. Ver ejemplo

Desplazamiento

Podemos indicar si deseamos que la imagen de fondo se desplace con el resto de la página cuando esta ocupe más de una pantalla o si deseamos que permanezca fija, a modo de "marca de agua", mientras se desplaza el resto del contenido.

Propiedad: background-attachment

Valores: el valor por defecto es scroll, mientras que si utilizamos fixed la imagen permanecerá fija. Ver ejemplo