Varias imágenes de fondo con CSS3

Sabemos bien que la sintaxis para agregar una imagen de fondo en algunas zonas del blog es la siguiente:

background: url(http://hosting.com/imagen.png) atributos de posicion etc;

Pero, ¿Cómo se podrán agregar más de una imagen de fondo?

Para diseñar algunas plantillas es necesario utilizar múltiples imágenes para un mismo elemento, esta es una función muy útil, pero que poco se conoce ya que la mayoría de los diseñadores utilizan atributos sencillos.


Para agregar variadas imágenes de fondo es necesario conocer la sintaxis:

background:url(URL-IMAGEN-1) no-repeat top left fixed, url(URL-IMAGEN-2) no-repeat top left fixed;

Verás que es muy similar a la de sólo un fondo, a diferencia que ésta contiene las url de las imágenes separadas por una coma (,)

Puedes ver el ejemplo siguiente:

1 Imagen:

Esta es una sección con contenido

2 Imágenes:

Esta es una sección con contenido

Consideraciones:

• Estas funciones no están disponibles en algunos navegadores antiguos, ya que son propiedades CSS3.