imagenes de fondo css

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

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 nos permite utilizar  múltiples fondos al mismo tiempo. Como vemos en este artículo, a la hora de crear una página web 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).

Múltiples imágenes de fondo en CSS3

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.

Si quieres seguir mejorando tu página, lee este artículo sobre cómo mejorar nuestro proyectos con CSS Media Query.

Deja una respuesta

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

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora