Múltiples imágenes de fondo con CSS

  • Por
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). Pero en este artículo de DesarrolloWeb.com vamos a mostrar cómo podríamos conseguir que un elemento de la web tuvisese varias imágenes de fondo al mismo tiempo. Colocar varias imágenes de fondo a un elemento en principio no se puede con CSS, por lo que mostraremos cómo hacerlo con una sencilla técnica alternativa. Pero también veremos que en CSS 3 existe la posibilidad de configurar varios fondos al mismo tiempo en un elemento, con una declaración de background-image y sin necesidad de realizar ningún tipo de técnica alternativa.

Referencia: Para conocer un poco de la reciente especificación de CSS3 os vendrá bien leer el artículo Introducción a CSS 3.

En CSS normal (CSS 1), como hemos dicho, podemos colocar un único fondo a un elemento de la página. Esto es algo soportado por todos los navegadores. Como no podemos poner más de 1 fondo por elemento, para colocar varios fondos al mismo tiempo, tenemos que utilizar varios elementos. A cada elemento le colocaremos un único fondo, pero al mostrarse los elementos en el mismo espacio, conseguiremos el efecto deseado de tener varios fondos de imagen a la vez.

En nuestro caso, vamos a utilizar varias capas DIV anidadas y cada una tendrá su fondo de imagen.

El código HTML que utilizaríamos para anidar varias capas DIV sería como sigue:

<div id="fondo1">
   <div id="fondo2">
      <div id="fondo3">
         contenido del elemento que va a tener 3 fondos de imagen distintos
         ...
      </div>
   </div>
</div>

Como se ha visto, podemos anidar varias capas DIV y cada una tendrá un identificador, o si lo preferimos una clase, para asignar estilos por CSS. Al estar anidados, todos los elementos DIV se mostrarán uno encima del otro.

Ahora veamos el código CSS para darle fondos a cada uno de estos elementos DIV:

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

Los fondos se superpondrán unos a otros, siendo el fondo1 el que se vea más abajo y el fondo3 el que se verá más arriba.

El resultado de este ejemplo se puede ver en una página aparte.

En principio todos los navegadores visualizarán perfectamente los fondos, pero como he utilizado imágenes transparentes en formato PNG e Internet Explorer 6 tiene problemas con la transparencia de los archivos PNG, podemos encontrar algún defecto, pero los fondos de los elementos DIV se verán.

Colocar varios fondos de imagen a un elemento con CSS 3

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.

De momento, la posibilidad de incluir varios fondos de imagen a un elemento sólo está disponible en el navegador Safari, pero esperemos que pronto otros navegadores vayan incorporando esta funcionalidad de CSS 3.

Este ejemplo se puede ver en una página aparte.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

caos30

07/1/2009
Muy bien explicado. Más claro el agua...

De todas formas, permiteme complementar tu explicación con otro buen truco.

Combinado con este truco de las capas anidadas, si además utilizamos como imagenes de fondo archivos PNG con transparencia "parcial" se pueden conseguir efectos muy espectaculares! lástima que ahora no recuerdo ninguna web en la que he visto que lo utilizan.

SERGI R.

Adrian Faundez St.Jean

03/2/2009
Super bueno el artículo y casi único diría yo.
Solo me resta consultar, cosa que he visto en otros ejercicios del uso del background-image, es el que generalmente las imagenes son gif o png.¿El estandar no acepta .jpg? ...esa es la consulta ya que no esta mencionado en el artículo.
gracias.

Robe

13/5/2009
Claro que puedes utilizar JPG
No hay problema en utilizar fondos en jpg, funcionará siempre. Sólo ten en cuenta que este formato gráfico no acepta transparencia, comparado con GIF o PNG.
Salu2!

Masterweb

04/6/2009
¿Por qué Utilizar multiple bg?
Pues bien no soy experto en esto del diseño, por eso hago esta pregunta, ¿no es más fácil usar una imagen editada, donde ya este montadas las tres imagenes? Es decir, abres tu editor de imágenes, subes los tres bg que quieres usar, lo guardas como un bg unico, y lo publicas.

Agradecería una clara respuesta.

Kazbam

15/7/2009
También Chrome
El segundo ejemplo, que dices que sólo lo soporta Safari, también lo soporta el navegador de Gooogle: Google Chrome.
Saludos, muy buen tip.

Maximiliano

18/9/2009
No se como hacerlo
Hola tengo Dreamwever CS3 coloco
background: url(../images/precio400.png) repeat-y,
url(../images/img3.gif) no-repeat center;

y no me sale nada como se si es css3 la hoja de estilos que tengo que hacer para convertila a css3

Saludos

angela

09/11/2009
No me sale :S
Hola, intente insertar una segunda imagen sobre el fondo ,pero no me sale nada,
lo estoy haciendo en Crimson Editor, espero que me puedas ayudar .

Alberto

30/1/2010
Gracias!
Muy bueno, es lo que quería saber desde hace tiempo ^^

Saludos!

OSuKaRu

09/12/2010
En respuesta a Masterweb y duda
Lo espectacular de este metodo es que el fondo se adapta a la resolución del navegador. cosa que no se conseguiria componiendo las imagenes en 1.
y la duda es: tengo problemas para poner un color neutro de fondo, además de las imagenes en las esquinas. ¿como lo hago? me salen las imagenes pero el fondo me sale blanco.

y a mi, en el Firefox me funciona el segundo metodo (salvo por lo del color del fondo)

2mx

27/3/2011
solo 1 imagen de fondo
He conseguido hacer mi fondo de la página web con un id

#principal{
background: url(../img/fondo.jpg) top left no-repeat, url(../img/acercade_r1_c2.jpg) top 42px no-repeat, url(../img/acercade_r1_c4.jpg) top center no-repeat, url(../img/acercade_r1_c13.jpg) top right no-repeat, url(../img/acercade_r2_c4.jpg) center 165px no-repeat, url(../img/acercade_r5_c2.jpg) 42px 292px no-repeat, url(../img/acercade_r5_c10.jpg) right 292px no-repeat, url(../img/acercade_r24_c2.jpg) 42px bottom no-repeat;}
}

Fny

27/11/2012
Solucion especial
Muchas Gracias por tu aporte!! me enkanto!!!! Saludos!!!!