Varias imágenes de fondo con CSS 3

CSS 3, MAQUETACIÓN

Descripción

El nuevo estándar CSS 3 está preparando gratificantes sorpresas. Una de las funcionalidades más esperadas es la que vamos a comentar en este artículo, se trata de colocar varias imágenes de fondo a la vez. Esto nos ahorrará una gran cantidad de chapucillas y permitirá hacer un código HTML más limpio.
Lamentablemente muy pocos navegadores lo soportan.

Ejemplo

Esto es un bloque con varias imágenes de fondo.
Si no ves el efecto correctamente, tu navegador no lo soporta. Prueba con Chrome o Safari.

Codigo

<style type="text/css">
.cuadro_ejemplo {
  padding:50px 10px 50px 10px;
  margin:0 auto 0 auto; /* para centrar el bloque */
  width:480px;
  text-align:center;
  /* Esta es la novedad: */
  background:
    url('__archivo__/codigo/articulos/cuadro/cuadro_arriba.gif')
    top no-repeat,
    url('__archivo__/codigo/articulos/cuadro/cuadro_abajo.gif')
    bottom no-repeat,
    url('__archivo__/codigo/articulos/cuadro/cuadro_medio.gif')
    center center repeat-y;}
</style>

<div class="cuadro_ejemplo">
Esto es un bloque con varias imágenes de fondo.<br>
Si no ves el efecto correctamente, tu navegador no lo soporta.
Prueba con Chrome o Safari.
</div>

Copia el código y pégalo en

Referencias

http://www.w3.org/TR/css3-background/

Comentarios