Los fondos múltiples

Regresar al índice

1. Funcionalidad

Con CSS2.1 solamente podemos aplicar una imagen como fondo de un elemento. Con CSS3 es posible aplicar varias imágenes, lo que nos ofrece posibilidades muy interesantes (http://www.w3.org/TR/css3-background/#layering).

2. Un ejemplo sencillo

Vamos a usar la propiedad background. La diferencia es simple: las distintas imágenes de fondo estarán separadas mediante una coma. En el ejemplo, he insertado un salto de línea tras cada imagen, para facilitar la lectura del código. Cada imagen corresponde a una cifra.

#imagenesMultiples {

position: absolute;

top: 10px;

left: 10px;

width: 150px;

height: 80px;

border: 1px solid #333;

background: url("uno.png") top left no-repeat,

url("dos.png") top right no-repeat,

url("tres.png") bottom left no-repeat,

url("cuatro.png") bottom right no-repeat;

}

Y el resultado visual:

Esta forma abreviada de la propiedad background es un "condensado" del uso de las propiedades: 

• background-image: ruta de acceso, URL de la imagen. 
• background-position: posición de la imagen indicada con palabras clave o con una unidad. 
• background-repeat: repetición de la imagen.

Este sería el equivalente en sintaxis "larga":

#imagenesMultiples2 {

position: absolute;

top: 10px;

left: 200px;

width: 150px;

height: 80px;

border: 1px solid #333;

background-image:url("uno.png"),

url("dos.png"),

url("tres.png"),

url("cuatro.png");

background-position: top left,

top right,

bottom left,

bottom right;

background-repeat: no-repeat;

}

Preste mucha atención, el orden de declaración de las imágenes indica su orden de aparición, independientemente de la posición. Analicemos la siguiente sintaxis para ilustrar ese orden de declaración y de visualización:

#imagenesMultiples3 {

position: absolute;

top: 10px;

left: 380px;

width: 150px;

height: 80px;

border: 1px solid #333;

background: url("uno.png") top left no-repeat,

url("tigre.jpg") top right no-repeat,

url("tres.png") bottom left no-repeat,

url("cuatro.png") bottom right no-repeat;

}

En el ejemplo, la fotografía del tigre se ha declarado en segundo lugar, tras la imagen del número 1. Esa fotografía (que tiene las mismas dimensiones que la caja) va a ocultar las imágenes de las cifras 3 y 4.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice