Backgrounds múltiples en CSS3 y un truco gradual

27/jun/2012 6

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

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

El truco

Necesitaba unir en el fondo del <body> 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 <body> (quizás con el fondo al 100%), 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

Links:

Comentarios

  1. inyaka [#]

    muy buenos ejemplos, excepto el primero que no viene mucho al caso,
    falto background multiple de imagen y gradiente 😉

  2. Jorge Epuñan [#]

    inyaka el ejemplo q pides es el 3, donde se usa imagen y gradiente simultaneos:

    background-image: url('pattern.png'), linear-gradient(#f00, #300);

    • Osvaldito [#]

      Y si no quiero que la imagen sea un pattern? que sea una imágen sin repetición y con posicionamiento específico?

      • Jorge Epuñan [#]

        Osvaldito: pues declara background-size y background-repeat para ambas definiciones de background-image, siguiendo el mismo orden claro.

  3. Desarrollador Web Freelance [#]

    Muy buen aporte a lo que estamos en el tema de desarrollo y Diseño, gracias Jorge un abrazo!

  4. Background Múltiple en CSS3 | Alegatica.T [#]

    […] Fuente: CSSLab […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab