Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 II

Múltiples fondos

Varias imágenes de fondo: método tradicional

Hasta ahora si queríamos poner varias imágenes de fondo en un sólo espacio la solución era hacer varias capas o divs superpuestos en los que ponemos una imagen en cada uno de ellos.

Debemos en principio anidar varios "divs" para mostrar una sóla área en la página. Veamos un ejemplo: queremos mostrar un área de la página con estas tres imágenes de fondo:

mosaico bob-esponja estrella-navidad

La primera imagen será un mosaico que rellene todo el fondo. La segunda la pondremos en el centro del área y la tercera en la esquina inferior derecha.

Este es el código HTML pàra este ejemplo:

<div id="capa1">
  <div id="capa2">
    <div id="capa3">
       <p>Esta área de la página tiene tres imágenes de fondo distintas</p>
    </div>
  </div>
</div>

Y el código CSS para poder poner las tres imágenes de fondo es el siguiente:

#capa1, #capa2, #capa3 { width: 400px; height: 300px; }
#capa1 { background-image:url(fondo1.jpg) ; }
#capa2 { background-image:url(fondo2.gif) ;
         background-repeat: no-repeat; 
         background-position: center center; }
#capa3 { background-image:url(fondo3.gif); 
         background-repeat: no-repeat; 
         background-position: bottom right; }

Las imágenes se superponen según el orden de las capas, la capa 1, que engloba al resto es la más profunda, y la capa 3 la que está por encima. El resultado será como en la página del siguiente enlace:

Superponer fondos

Varios fondos en CSS3: ejemplo:

Retomemos el ejemplo anterior y veamos cómo se resuelve con CSS3.

Para empezar no necesitamos crear varias capas, ya que CSS3 permite poner varias imágenes de fondo en una sóla capa. por lo tanto el código HTML será el siguiente:

<div id="capa1">
  <p>Esta área de la página tiene tres imágenes de fondo distintas</p>
</div>

En CSS3 la propiedad background permite poner distintas imágenes separadas por comas, el orden va de la más externa a la más interna, por lo tanto la primera imagen estará por encima de todas y la última debajo de todas.

Veamos el código CSS3 que utilizamos para colocar las imágenes de fondo en este ejemplo:

#capa1 { width: 400px; height: 300px; 
        background: url(fondo3.gif) bottom right no-repeat,
          url(fondo2.gif) center center no-repeat, 
          url(fondo1.jpg) repeat; }

Hemos usado aquí la propiedad background de tipo "shorthand" con lo cual después de la "url" con el archivo indicamos la posición (background-position) y la repeticion (background-repeat). Cada uno de estos bloques afecta a una imagen, y se separan por comas. El orden en que se muestran las imágenes va de la más exterior (la primera por encima de todas) a la más interior (la última la que está debajo). El resultado del código anterior lo puedes ver en la siguiente página (para ello necesitas un navegador que no sea Internet Explorer y además tenerlo actualizado):

Multiples fondos con CSS3

Como puedes observar el resultado es el mismo que con el método tradicional, la ventaja está en que el código es mucho más simple.

Propiedades simples

Hemos hecho el ejemplo anterior utilizando la propiedad background tipo "shorthand" que agrupa a varias propiedades "background". Podemos realizar el código anterior con cada una de las propiedades "background por separado, es decir utilizando las propiedades background-image , background-position y background-repeat; el código siguiente tiene el mismo resultado que el anterior:

#capa1 { width: 400px; height: 300px; 
        background-image:url(fondo3.gif), url(fondo2.gif), url(fondo1.jpg);
        background-position: bottom right, center center, top left;
        background-repeat: no-repeat, no-repeat, repeat;
        }

Aquí hemos puesto las propiedades por separado, los valores correspondientes a las distintas imágenes también van separadas por comas.

la propiedad background-attachment: también podemos utilizarla con distintas imágenes, sin embargo el valor "fixed" sólo funciona si en background-repeat le hemos dado como valor "no-repeat".

Compatibilidad en navegadores

Esta propiedad es compatible con la mayoría de sus navegadores en sus versiones más actuales. (octubre 2011). Actualmente tanto Firefox como Safari y Chrome admiten multiples fondos, tanto si se escriben las propiedades por separado como si escribimos la propiedad tipo "shorthand". Opera en su versión más reciente (11.5) sólo admite multiples fondos si escribimos la propiedad tipo "shrothand".

Internet explorer todavía no admite múltiples fondos, sin embargo parece ser que en su próxima version (IE 9) incorporará ya esta propiedad.






En la siguiente página veremos otras propiedades de los fondos

Otras propiedades de los fondos.



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo