Bueno como sabemos, con CSS solo podemos agregar un fondo por elemento, si queremos mostrar tres fondos juntos sería algo así:
<div id="fondo1">
<div id="fondo2">
<div id="fondo3">
Contenido...
</div>
</div>
</div>Pero ahora, gracias al CSS3 podemos usar más de un fondo en un solo elemento.
HTML:
<div id="fondo"> </div>CSS:
<style type="text/css">
#fondo{
background: url(mifondo3.png) center no-repeat,
url(mifondo2.png) center no-repeat,
url(mifondo1.png) center repeat;
width: 600px;
}
</style>
Creo que esto es mas claro que nada pero igual explico, en la primera linea de propiedad usamos background: para definir el fondo principal, la posición y que no se repita de nuevo.
En la segunda y tercer linea usamos url para mostrar los otros 2 fondos.
Si han notado, hay una
, después de las primeras 2 lineas esto es muy importante, otro punto que pueden notar es que va del 3 al 1 ¿Por qué?
es porque las imágenes que declaramos se van colocando de modo que la primera aparece sobre las siguientes,ejemplo: mifondo1.png, que está colocada como último fondo, es la que aparece detrás del todo.
Podemos ver un ejemplo acá:
Dame clic 
PD. De momento solo he visto que sirve con chrome y safari. Si sirve en estos 2 imagino que también sirve con mozilla.
Con IE lo más seguro es que no funcione... ¿Qué raro no?
