Múltiples fondos con CSS3

Otra de las novedades del CSS3 es la posibilidad de utilizar varias imágenes de fondo en un mismo elemento. Hasta ahora, cuando colocamos un fondo a una etiqueta, el rectángulo puede contener sólo una y eventualmente, un color alternativo. Por ejemplo, un DIV así:

<div style=" background: #303941 url(URL_imagen) no-repeat 50% 50%; height: 300px; width: 300px;"></div>

Nos mostrará esto:

Es decir, un rectángulo de cierto tamaño donde la imagen de fondo esta centrada y como es pequeña, no alcanza a cubrir ese área así que el resto se llena con el color alternativo. Si quisiéramos poner una segunda imagen de fondo, deberíamos agregar otro rectángulo encima:

<div style=" background: #303941 url(URL_imagen1) no-repeat left top; height: 300px; width: 300px;">
  <div style="background: transparent url(URL_imagen2) no-repeat right bottom; height: 300px; width: 400px;"></div>
</div>

Una imagen se posiciona en el ángulo superior y otra en el ángulo inferior. Como en el DIV interno el color alterno se define como transparente, la segunda imagen se superpone a la primera.

Pero, la w3org propone simplificar esto y permitir que se coloquen varias imágenes en el mismo elemento. Para esto, es más cómodo separar la definición en partes; en lugar de:

background: color url(URL_imagen) repeat posicionX posicionY;

escribiremos cada una por separado: background-color, background-image, background-repeat y background-position; separando los datos con comas:

background-image: url(URL_imagen1), url(URL_imagen2);
background-position: left top, right bottom;
background-color: #303941;
background-repeat: no-repeat;

En la primera establecemos la dirección de dos imágenes distintas, en la segunda, la posición de cada una de ellas y en las dos última, como esas propiedades serán iguales para ambas, escribimos una sola.

Algunos críticos dicen que esto sólo aumentará el peso de as páginas pero, es una opinión que no tiene sustento ya que aún sin esta facilidad, nada impide agregar muchos fondos, esta posibilidad, sólo lo hace menos engorroso. También se dice que hay una limitación de ocho alternativas dadas por las combinaciones de left top right y bottom pero es un error, no está indicado si hay una limitación y la posición puede ser definida en pixeles así que es posible colocar un número indeterminado de fondos:

ejemplo con cuatro fondos desplazados

A diferencia de otras propiedades de CSS3, esta alternativa debe usarse con cuidado ya que sólo está disponible en las últimas versiones de Firefox, Safari y Google Chrome. En Internet Explorer, usar múltiples fondos es tomado como un error y por lo tanto, no se verá ninguna imagen así que no queda más remedio que utilizar alguna clase de hack alternativo.

Lo más simple sería aprovechar que IE pasa por alto determinados errores sintácticos en el CSS (aunque es muy estricto con otros). Los navegadores ignoran las propiedades que están definidas anteponiéndoles algún caracter extra; por ejemplo _background no será tomado en cuenta , no significará nada, ni siquiera se indicará un error pero Internet Explorer ignora ese caracter extra así que acepta la propiedad como si se hubeira escrito correctamente; de este modo, podríamos agregarlo al final de las definiciones anteriores de nuestro DIV para que, al menos, se vea algún fondo:

_background: #303941 url(URL_imagen) no-repeat 50% 50%;

Hay varias teorias respecto a qué carácter usar:

*background para IE7 y versiones inferiores
_background para IE6 y versiones inferiores
#background para todas las versiones