Niquelao

Multiples imágenes de fondo con CSS 3 25 de Noviembre de 2009, por Rumoroso

Una de las novedades que introduce CSS 3 (y que por mi parte es bienvenida) es la posibilidad de incluir múltiples imágenes de fondo para un mismo elemento (http://www.w3.org/TR/css3-background/#layering).

Hasta el momento, si queríamos combinar más de una imagen como fondo, lo único que podíamos hacer era utilizar alguno de los elementos que teníamos en nuestra página, aplicando un fondo a cada uno para obtener el resultado deseado. Incluso en ocasiones, utilizábamos marcado extra, disminuyendo la calidad de la web al añadir marcado con fines únicamente presentacionales.

Pero ahora la cosa cambia…

Gracias a CSS 3, si queremos utilizar dos o más imágenes de fondo, a la propiedad background-image: le podremos añadir la ruta de cada una de ellas separándolas con comas. Por ejemplo:

background-image: url('fondo1.png'), url('fondo2.png')

Con algo tan sencillo como esto tenemos declarado lo necesario para que el elemento sobre el que lo apliquemos tenga las dos imágenes como fondo.

Claro, a partir de este punto surgen nuevas dudas…

• ¿se superponen entre ellas?
• ¿se pueden posicionar en distintos lugares?
• ¿se puede repetir una sobre un eje y evitar que la otra lo haga?
• …

…y todas tienen como respuesta SI.

Respecto a la superposición, la primera imagen que se declara es la que se coloca más próxima al usuario. A continuación y por detrás de esta, se coloca la siguiente (en un eje perpendicular a la pantalla), luego la siguiente, y así sucesivamente hasta la última, que será la que se sitúe detrás de todas. Es como si cada imagen se situase en una capa. Si además declaramos un color de fondo, este se pondrá por detrás de todas las imágenes empleadas.

En cuanto al resto de dudas, puedo generalizar una respuesta, pues todas han surgido al pensar en las propiedades que habitualmente utilizamos, es decir, posición de la imagen de fondo (background-position), comportamiento al scroll (background-attachment) y repetición (background-repeat). Si queremos que cada imagen tenga un valor determinado, únicamente habremos de declararlos consecutivamente y separados por comas (al igual que hicimos al declarar las propias imágenes). Por ejemplo:

background-image: url('fondo1.png'), url('fondo2.png'), url('fondo3.png');
background-position: 0 0, 150px 200px, left center;
background-repeat: no-repeat, repeat-x, no-repeat;

Con esto declaramos tres imágenes como fondo, la primera se situará arriba a la izquierda, la segunda se desplazará hacia la derecha 150px y hacia abajo 200px y la tercera se colocará también a la izquierda y centrada verticalmente. Respecto a la repetición, la primera y la última no se repetirán y la segunda lo hará sobre el eje horizontal.

Pero aquí no se termina el tema. Para los que nos gusta optimizar el código (que deberíamos ser todos), algunas declaraciones se pueden abreviar:

background-position: 0 0, 150px 200px, left center;

pasa a:

background-position: 0 0, 150px 200px, left;

Se elimina la palabra center. Como todos sabemos (o deberíamos saber), cuando no se declara uno de los valores de posición del fondo, el que toma por defecto es el de centrado (center), en este caso vertical.

background-repeat: no-repeat, repeat-x, no-repeat;

pasa a:

background-repeat: no-repeat, repeat-x;

El tercer valor se puede eliminar. La razón es que cuando faltan valores, se repite la lista de los valores que ya declarados hasta tener uno por imagen (de ahí que si empieza la relación de valores de nuevo, el primero sea no-repeat).

Pero aún se puede optimizar más, aprovechando la propiedad shorthand background::

background: url('fondo1.png') 0 0 no-repeat, url('fondo2.png') 150px 200px
repeat-x, url('fondo3.png') left no-repeat;

Como veréis, todo esto abre el abanico de posibilidades a nuestros diseños.

Algunos navegadores, en sus versiones actuales, comienzan a tener soporte para múltiples imágenes de fondo. Entre ellos están Firefox (a partir de la versión 3.6), Chrome, Safari y Konqueror. Si estáis utilizando uno de ellos, podéis ver el resultado en el ejemplo que he preparado. Lamentándolo mucho, aun no hay soporte en Internet Explorer (ya se verá si lo incluyen en su futura versión 9) ni en Opera. A continuación os incluyo un pantallazo con lo que se muestra en el ejemplo cuando hay soporte (si accedéis con un navegador sin soporte, únicamente veréis el borde punteado):

Aparte de lo comentado, CSS 3 también incluye nuevos valores para algunas de las propiedades mencionadas, además de nuevas propiedades que darán gran versatilidad a nuestros diseños. En un próximo artículo las trataré en detalle. Para ir abriendo boca os menciono background-size… ¡sí, es lo que estáis pensando!

nota: Supongo que aparte del contenido técnico del artículo, lo más apetecible es la tarta de la foto. Pues para daros un poco de envidia os diré que la foto la hice yo y es una tarta de frutas que me preparó Dolores… Es evidente que ella también domina el tema de controlar la presentación, pero además os garantizo que el domina la gestión de contenidos, pues estaba deliciosa…

Multiples imágenes de fondo con CSS 3

Categoría: CSS

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.

• Artículo anterior: Otro toque de estilo en el Curso de CSS
• Artículo siguiente: CSS 3: Propiedades de fondo