Múltiples fondos (background) con CSS

Quizá en algún momento quieras usar dos imágenes de fondo en un elemento HTML, o en la plantilla de tu blog, como por ejemplo, para poner una imagen hasta arriba y otra imagen distinta abajo, en el footer.
Lo más recurrente es crear dos o más contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o más imágenes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.

En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ahí agregar las URLs de las imágenes, separadas por una coma. Por ejemplo, si quisiéramos añadir dos imágenes al fondo del blog sería algo así:

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
}

Y para cambiar su posición usamos background-position, de igual manera estableceremos la propiedad para la primera imagen, luego ponemos una coma, y después ponemos la otra posición.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
}

Ahí hemos dicho que la primera imagen se acomodará en el lado superior izquierdo, y la segunda en el lado inferior derecho.
También podemos especificar si se repetirán las imágenes o no.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Si también queremos añadir un color de fondo podemos hacerlo usando background-color.

body {
background-color: #ccc;
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Puedes ver un ejemplo con el DIV que está a continuación, parece una sola imagen pero la realidad es que usamos un color de fondo, luego una imagen arriba, y otra imagen abajo.

Múltiples Fondos con CSS

Este es el código completo que he usado para el ejemplo anterior.

CSS

#doblefondo {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_MsFA0LGkVDWynskPGEa73DNBrLBbpL2TkuAwJ5Wp3PnijOnZhET7mkDyDWmDV2jBJhRLuyw_BvywuzLgqaqsmCcqum_Dvmv1j8d1HMbIRMOEL45kgHhC-ZLvoNJoJf5LIWEzsv0EfpZT/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNMWHznteJF4ccD5PYE3wqbsHCZMBgbaOZ2gDg5E_xKMw1JaelOoO06GCNFpywccO22K2fe2FeUEOL6HxyAoLEDtxYiQcjGaceejywGO8QBAjF9mNj2OaOAV-VE5GKFTxh7Q11blKlRUzJ/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doblefondo h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML

<div id="doblefondo">
<h2>Múltiples Fondos con CSS</h2>
</div>

Pero el número de imágenes no es una limitante ya que podemos usar tres o más y darle a cada una de ellas una propiedad distinta. Como en el siguiente DIV de ejemplo, añadimos tres imágenes de fondo, cada una tiene una posición diferente, y la tercera se repetirá horizontalmente.

Este es el código completo.

CSS

#doblefondo {
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8qZSsqcAnGqcO2R0ICL12ryTRX4n7MB0Lgdj7oLBGOKfFdfaK3M-zWZzTTHU9CzS5Ge2Ftu2p24of4-dQ_EZ4esEEz0N7fVP9fg3IbvbnB5pTZmuklub0gAsS62ycJUL6QZftIfC6Xoy/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXQlkx0Ij2tVG7IytqEsW8g7PueSyc8kQBsPyOHODJInc4xOUPq2tRmWC774dIb4w27RWY01dSqhpY1R5u30tb01xJIZLFje6VYGGDaZhuUmCsBN122QuPifmdHEZx_XmEeZ6DM8fPwUL/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDyiNZVeMzlDs1OmtF04Gp1S6Nftkx4VDE_rCOtxAKfYWcwbcKIqNZItIF8WfJgCLC6g49Vpd373taUpBJI31QkVTKIVpZ6zBk2mqxvna3HLW6A61IXiGrP0hehr3m4UjiJsTdXDv7GEp/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML

<div id="doblefondo">
</div>

Como puedes ver, poner más de una imagen de fondo en la plantilla del blog o un contenedor es de lo más sencillo. Recuerda siempre separar con una coma las propiedades e imágenes, excepto la última, esa no lleva coma, sólo punto y coma.