Múltiples imágenes de fondo con CSS3

Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.

Con el atributo background-image podemos conseguir que un elemento de la página tenga un fondo de imagen. Esto debemos saberlo, puesto que es algo básico de las hojas de estilo en cascada (CSS).

Una de las nuevas características de CSS 3 consiste en la posibilidad de declarar varios fondos de imagen a un elemento de la página. Lo que antes hemos visto que es posible, creando varios elementos anidados y colocando un fondo en cada uno, se puede hacer en CSS 3 con un solo elemento, al que aplicaremos varios fondos distintos.

El HTML del ejemplo de varias imágenes de fondo sería el siguiente:

<div id="fondos">
   texto de un único elemento
   ...
</div>

Ahora veamos el CSS 3 válido para este ejemplo:

<style type="text/css">
#fondos{
      background: url(fondo3.png) bottom right no-repeat, 
      url(fondo2.png) center no-repeat, 
      url(fondo1.gif) center repeat;
      width: 300px;
}
</style>

Sólo cabe comentar que las distintas imágenes de fondo se tienen que escribir en la declaración CSS separadas por comas. Además, las imágenes que declaramos se van colocando de modo que la primera aparece sobre las siguientes. Así pues, en esta declaración, fondo1.gif, que está colocada como último fondo, es la que aparece detrás del todo.

 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información