Cómo utilizar varias imágenes de fondo con CSS


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Uno de los atributos de CSS más utilizados es background-image, que nos  sirve para poner una imagen de fondo en nuestra página web. Pero también podemos conseguir  múltiples fondos al mismo tiempo. Como vemos en este artículo, con CSS3 tenemos la posibilidad directa de configurar varios fondos a la vez muy fácilmente y si usamos CSS1 también podremos hacerlo, aunque tendremos que echar mano de una alternativa y algo de trabajo adicional para que se visualice correctamente.

Múltiples imágenes de fondo en CSS3

En CSS 3 podemos declarar varios fondos de imagen a un mismo elemento de la página, lo que nos ahorra tiempo y código.

El código HTML podría ser el siguiente:

<div id="losfondos">
 contenido para un único elemento
 ...
 </div>

El código CSS3:

<style type="text/css">
 #losfondos{
 background: url(imagenfondo3.png) bottom right no-repeat,
 url(imagenfondo2.png) center no-repeat,
 url(imagenfondo1.gif) center repeat;
 width: 300px;
 }
 </style>

Las distintas imágenes de fondo que añadamos tienen que escribirse separadas por comas en la declaración CSS. Estas se mostrarán unas sobre otras por el orden en el que aparecen escritas, por lo que en el ejemplo, la que está más atrás será la que tienen el nombre imagenfondo1.gif.

Múltiples imágenes de fondo en CSS1

Para conseguir el mismo efecto en CSS1, utilizaremos parias capas DIV anidadas y cada una dispondrá de su propia imagen de fondo. El código quedaría tal que así:

<div id="fondoimagen1">
 <div id="fondoimagen2">
 <div id="fondoimagen3">
 aquí el contenido que van a tener los fondos de imagen diferentes
 ...
 </div>
 </div>
 </div>

A cada DIV anidado (uno encima de otro) le asignamos un identificador (id), aunque también podríamos ponerle una clase (class) para establecer estilos.

El código CSS para determinar los fondos a cada elemento DIV sería el siguiente:

<style type="text/css">
 # fondoimagen1{
 background-image: url(imagen1.gif);
 width: 300px;
 }

# fondoimagen2{
 background-image: url(imagen2.png);
 background-repeat: no-repeat;
 background-position: bottom right;
 }

# fondoimagen3{
 background-image: url(imagen3.png);
 background-repeat: no-repeat;
 background-position: center;
 }
 </style>

Los fondos estarán unos sobre otros con el siguiente orden, de más abajo a más arriba: fondoimagen1 (imagen de fondo azul con logo de arsys), fondoimagen2 (texto con fuente en color negro), fondoimagen3 (texto con fuente en color azul).

Los navegadores podrán visualizar todo esto si ningún problema, pero tenemos que tener en cuenta que hemos utilizado imágenes transparentes, tanto en formato PNG, como en formato GIF, por lo que es posible que los navegadores anteriores a  Explorer 6 presenten problemas con la visualización de la transparencia en los PNG.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *