Con CSS se puede especificar el fondo de un elemento cualquiera, y sus propiedades. Se puede especificar el color, la imagen que se usará, si esta imagen debe repetirse o no, y dónde debe ubicarse.

background-image : url(ruta a la imagen);

La imagen que se usará como fondo. Casi todos los navegadores actuales (excepto IE <= 8) soportan múltiples imágenes de fondo, que se superponen según sea necesario. Es decir, se puede colocar una imagen de fondo arriba a la derecha, otra abajo a la izquierda, y otra que se repita en toda la página. La posibilidad de especificar múltiples imágenes de fondo para un mismo elemento es parte de CSS 3.

background-repeat : repeat | no-repeat | repeat-x | repeat-y

Especifica si la imagen debe repetirse tanto vertical como horizontalmente.

• repeat hace que se repita en mosaico en ambos sentidos
• no-repeat hace que la imagen se muestre solo 1 vez
• repeat-x hace que la imagen se repita horizontalmente
• repeat-y hace que la imagen se repita verticalmente.

background-color : rgb(XXX,YYY,ZZZ) | #XXYYZZ | color

Especifica el color del fondo.

• rgb(XXX,YYY,ZZZ) Valores decimales para rojo, verde y azul
• #XXYYZZ valores hexadecimales (tal y como se usan en HTML)
• color uno de los 17 colores predefinidos en CSS.

background-attachment : scroll | fixed

Especifica si la imagen de fondo debe desplazarse o no con el texto (scroll la deja moverse, fixed la deja fija).

background-position: posVertical posHorizontal

Especifica la posición en la que se ubica la imagen de fondo. La forma más fácil de especificarla es usando las palabras top (arriba), left (izquierda), right (derecha) y bottom (abajo). También pueden especificarse porcentajes, por ejemplo un valor de 15% 30% ubicará la imagen de fondo (su esquina superior izquierda) con un margen izquierdo de 15% del ancho de la página, y un margen superior de 30% de la altura de la página. Otros valores más usuales son, por ejemplo top left, o bottom right.

background

La forma corta, personalmente me parece difícil de recordar y más compleja que usar las propiedades largas, pero existe. Sirve para especificar todas las propiedades del fondo en una sola línea:

background: background-color || background-image || background-repeat || background-attachment || background-position

No es necesario especificar todas las propiedades, lo siguiente es perfectamente válido:

background: white url(fondo.png);

Y tampoco es necesario especificar las propiedades en el orden mostrado, lo siguiente también es válido (ejemplo mostrado en el sitio del W3C):

background: url("chess.png") gray 50% repeat fixed

Enlaces relacionados

• CSS Nivel 2
• CSS: Colores y fondos
• Valores de CSS: colores
• Colores predefinidos en CSS