Con CSS3 el soporte a múltiple background nos permite ser mucho más creativos al momento de solucionar problemas de estilos, cuando antes sólo dependíamos de crear y anidar etiquetas y cortar esos gif’s y png’s que tanto nos han atormentado.

La sintaxis para fondos múltiples es bastante intuitiva:

background: url(…) top left no-repeat, url(…) right bottom no-repeat;

Su soporte -a la fecha según caniuse.com– es favorable para los browsers modernos. Para los que no lo soporten esta declaración será totalmente ignorada, por lo que mi recomendación es que primero definas un background como fallback y luego escribas los múltiples que necesites.

[Ver ejemplo 1][1]{.verejemplo}

Fondos con gradientes⌗

Como algunos ya podrán haber probado, con CSS3 podemos crear gradientes (lineales o radiales) y tratarlos directamente como imágenes. Su soporte también ya está ampliado y la sintaxis es familiar:

background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#f00), to(#f60));

Aunque no se han puesto de acuerdo con normalizarla, así es para Firefox:

background-image: -moz-linear-gradient(90deg, #f00, #f60);

[Ver ejemplo 2][2]{.verejemplo}

El truco⌗

Necesitaba unir en el fondo del un patrón como imagen en png, con un fondo gradiente radial. Lo que se haría antes sería el fondo gigantesco ya con el gradiente y el patrón, el cual pesaría muchos kilos y lo pondría como fondo del (quizás con [el fondo al 100%][3]), pero ahora la cosa cambió. Como el gradiente para CSS es una imagen, podemos utilizarlo como un background-image más. El código quedó de la siguiente manera:

background-color: #141414;
background-image: url('pattern.png');
background-image: url('pattern.png'), -webkit-gradient(linear, 50% 50%, 0, 50% 50%, 500, from(#f00), to(#300));
background-image: url('pattern.png'), -webkit-linear-gradient(#f00, #300);
background-image: url('pattern.png'),    -moz-linear-gradient(#f00, #300);
background-image: url('pattern.png'),    -ms-linear-gradient(r#f00, #300);
background-image: url('pattern.png'),      -o-linear-gradient(#f00, #300);
background-image: url('pattern.png'),         linear-gradient(#f00, #300);

[Ver ejemplo 3][4]{.verejemplo}

[1]: http://www.csslab.cl/ejemplos/multiplebackground/ejemplo1.html “Enlace en CSSLab a “Ejemplo 1"” [2]: http://www.csslab.cl/ejemplos/multiplebackground/ejemplo2.html “Enlace en CSSLab a “Ejemplo 2"” [3]: http://www.csslab.cl/2012/03/29/tip-precoz-fondo-al-100-con-css3/ “Enlace en CSSLab.cl a “Tip Precoz: Fondo al 100% con CSS3"” [4]: http://www.csslab.cl/ejemplos/multiplebackground/ejemplo3.html “Enlace en CSSLab a “Ejemplo 3"”