Múltiples imágenes de fondo con CSS

El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los diseñadores sobre los elementos de la página ha sido más difícil de cubrir.

Las especificaciones anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las webs, pero los desarrolladores aún continúan usando trucos diversos para conseguir efectos tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la página.

Cómo conseguir que un elemento de la página tenga múltiples imágenes de fondo con CSS

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