Los fondos también llamados background para respetar el nombre de la propiedad de CSS, son empleados en nuestras aplicaciones para embellecer una página web; podemos hacer muchas cosas, animarlos con CSS:

O con JavaScript; empleando canvas como hemos visto en múltiples entradas:

Android

Pero en esta entrada les mostraremos como podemos asignar múltiples fondos o imágenes a un mismo elemento HTML; con tan sólo separar cada una de los valores que queremos colocar ('url(ruta-imagen)') por comas (,) de la siguiente forma hacemos el cometido; por ejemplo:

.ejemplo1{
background-image: url(twitter-logo.png), url(facebook-logo.png), url(google-plus-logo.png);
}

Y este es el resultado

Definiendo el CSS para cada imagen de fondo

Con esto tenemos las tres imágenes como fondo se superponen, pero hemos logrado el objetivo el cual es mostrar múltiples fondos o background en un mismo elemento; ahora podemos aplicar ciertas reglas a cada uno de los background ya definidos para evitar que se superpongan

Es decir por separados; para lograrlo debemos de seguir los mismos pasos; que consisten en separar los valores de los atributos por comas (,):

.ejemplo2{
background-image: url(twitter-logo.png), url(facebook-logo.png), url(google-plus-logo.png);
background-position: 110px 162px, 58px 80px, 0px 0px;
background-repeat: no-repeat;
}

Vemos que de nuevo tenemos un background-image con tres fondos y dos nuevas reglas.

La primera propiedad background-position indican la posición que tomarán nuestros fondos: "url(facebook-logo.png)" se posiciona en las coordenadas "30px 80px"; es decir el fondo luego de la coma i (donde 1<=i<=3) le corresponde posicionarse en la coordenada luego de la coma i; existe una relación uno a uno entre el background-image y el background-position.

Para la segunda nueva regla "background-repeat" con el valor "no-repeat" le estamos indicando que NO repita la imagen sobre el elemento ni vertical ni horizontalmente; además de esto podemos ver que dicha propiedad sólo aparece una vez y esta afecta a los tres fondos.

Resumen de las propiedades background

Para trabajar con los fondos en CSS tenemos muchas propiedades de la familia background; en esta entrada vimos tres propiedades como puedes consultar en lo explicado anteriormente, por una parte tenemos la propiedad background-image que permite indicar los fondos de las imágenes que vamos a emplear, también tenemos la propiedad background-position para indicar la posición de las imágenes especificadas en la regla anterior y de esta forma no se solapen entre sí como ocurre en el primer escenario y por último tenemos la propiedad background-repeat para indicar si queremos que se repita el fondo, o se repita el fondo en alguno de los ejes X y Y o que simplemente no se repitan como hicimos anteriormente, de tal forma tenemos muchas formas con la que trabajar con los fondos en CSS cosa que no teníamos en CSS en su versión uno, que si queríamos trabajar con múltiples fondos teníamos que hacer algo como lo siguiente:

<div id="fondo1">
   <div id="fondo2">
      <div id="fondo3">
         contenido con tres fondos de imagen
      </div>
   </div>
</div>

Y como podrás suponer, cada uno de estos div anidados tendría un fondo distinto a la cual le variamos la posición con la propiedad mencionada anteriormente; no hace falta decir que definir fondos anidados de esta forma es impráctica y con CSS3 podemos hacer las cosas mucho más sencillas.