Múltiples Backgrounds con CSS 3

Es curioso la de cosas que nos estamos perdiendo 🙂 Es por ello que quería compartir la posibilidad de tener múltiples backgrounds utilizando la propia etiqueta background-image. Lo cierto es que prácticamente todos los navegadores actuales lo soportan y creo que es una feature que deberíamos aprovechar. Veamos el ejemplo :):

<!DOCTYPE html >
<html>
<head>
    <title>Multiple Backgrounds</title>
    </head>
<body>
    <div id="example">
    </div>
</body>
</html>

#example
{
     width: 100%;
     height: 530px;
     background-image: url(https://www.returngis.net/wp-content/uploads/pics/demos/worm.png), url(https://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
     background-position: center bottom,center bottom; /*You don't need type this twice*/
     background-repeat:no-repeat;
 }

Lo único que estoy haciendo para poder trabajar con múltiples backgrounds es separar cada una de las imágenes con una coma y colocándolas en el orden que se deben superponer. En este caso, queremos que el personaje del Worms aparezca encima del paisaje de fondo, por lo que ocupará el primer lugar en la sucesión de imágenes. Por otro lado, podemos hacer uso de background-position para determinar la posición de cada una de las imágenes de la misma forma, separando por comas.

Por último, un punto a tener en cuenta es que si el valor de la propiedad es el mismo, no es necesario ponerlo explícitamente por cada una de las imágenes, sino que podemos indicar el valor solamente una vez y será aplicado a todo el conjunto, como ocurre en el caso de background-repeat.

Espero que sea de utilidad, a la par que interesante 🙂

¡Saludos!