Una de las mejoras menos conocidas en CSS3 es la capacidad de especificar múltiples fondos con la propiedad background. De esta forma los diferentes fondos se irán montando en cascada.
Pero primero revisemos la propiedad background.
background: [color] [image] [repeat] [attachment] [position];
De esta forma, poner una imagen de forma sencilla podría hacerse de la siguiente forma:
background:url(logo.png) no-repeat 50px 700px;
Para poner múltiples fondos con CSS simplemente tendremos que concatenarlos con comas. Así, si queremos tener dos imágenes de fondo lo haremos de la siguiente forma:
background:url(logo.png) no-repeat 50px 700px,
url(bg.gif) repeat 0 0;
Como el soporte de múltiples fondos no está en todos los navegadores tendremos que utilizar un pequeño truco, y este será especificar varios fondos. Uno de ellos será definido de la forma tradicional:
background:url(bg.gif) repeat 0 0;
background:url(logo.png) no-repeat 50px 700px,
url(bg.gif) repeat 0 0;
Así el navegador que no soporte los múltiples fondos, cargará un único fondo, de la forma tradicional.
Las versiones de los navegadores a partir de las cuales se soportan los múltiples fondos con CSS son:
- Chrome 4.0
- Safari 4.0
- Opera 10.10
- Firefox 3.6
- Internet Explorer 9
