Añadir fondos múltiples con CSS3, compatibles con todos los navegadores

Con CSS3 se ha introducido la posibilidad de añadir múltiples fondos a los elementos de caja. La mayoría de los navegadores modernos soportan múltiples imágenes en el background de un box element.

Demo

Tenemos dos métodos para añadir fondos múltiples: utilizando las propiedades individuales de background o la propiedad shorthand. Con ambas técnicas obtenemos el mismo resultado final, pueden elegir la que les quede más cómoda para que el código CSS les quede ordenado.

En este ejemplo definimos tres imágenes como fondo: Mario, el hongo y el clásico fondo del juego vintage. Necesitamos que Mario y el hongo se posiciones sobre el fondo del juego para poder apreciarlos.

AÑADIR FONDOS MÚLTIPLES CON LAS PROPIEDADES INDIVIDUALES

Hemos diagramado nuestro fondo empleando las propiedades individuales de background: background-imagebackground-position y background-repeat.

.main {
 width: 500px;
 height: 500px;
 margin: 150px auto 0;
 background-image: url(mario.png), url(hongo.png), url(bg_mario.png);
 background-position: 135px 396px, 350px 405px, bottom left;
 background-repeat: no-repeat, no-repeat, no-repeat;
 box-shadow: 0 2px 5px rgba(25, 25, 25, 0.4);
 }

Varias imágenes se especifican como fondo utilizando una lista separada por comas con los valores para la propiedad background-image, cada valor genera una capa separada para el fondo. Si pensamos en capas como en los programas de diseño, la capa superior — más cercana al usuario — será el primer atributo que agregaremos (en este caso la imagen de Mario) y la capa inferior el último atributo (el fondo del juego).

Cuando especificamos un color mediante background-color éste será la capa final, que se posiciona detrás del resto. En las versiones anteriores a Internet Explorer 9 será la única capa visible.

Si al entrar a la demo no ves el paisaje de Mario Bros deberías considerar seriamente actualizar tu navegador o utilizar Chrome, Firefox, Safari u Opera.

En cada propiedad debemos mantener el orden al escribir los atributos ya que se emparejan entre sí en orden.  Si especificamos menos posiciones que imágenes en background-position, se comenzará a repetir desde el primer valor tantas veces como sea necesario para que cada imagen tenga un valor de ubicación. Si colocamos más valores de posición, los que sobren serán ignorados.

AÑADIR FONDOS MÚLTIPLES CON LA PROPIEDAD SHORTHAND

.main {
 width: 500px;
 height: 500px;
 margin: 150px auto 0;
 background: url(mario.png) 135px 396px no-repeat, url(hongo.png) 350px 405px no-repeat, url(bg_mario.png) bottom left no-repeat;
 box-shadow: 0 2px 5px rgba(25, 25, 25, 0.4);
 }

También es posible utilizar la propiedad shorthand background y agrupar todos los atributos allí, separados por una coma. El mismo sistema de layer se aplica.
Fondo de Mario Bros en alta definición gracias a Hyp64 y los íconos de Mario y el hongo gracias a ph03nyx

Demo
Scroll to top