No al cierre de webs
TreeWeb::Artículos::HTML y CSS::Varias imágenes de fondo con CSS 3
Permalink: http://www.treeweb.es/u/501/ 10/11/2010

Varias imágenes de fondo con CSS 3

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.

Código

    0 
    1 <style type="text/css">
    2 .cuadro_ejemplo {
    3   padding:50px 10px 50px 10px;
    4   margin:0 auto 0 auto; /* para centrar el bloque */
    5   width:480px;
    6   text-align:center;
    7   /* Esta es la novedad: */
    8   background:
    9     url('__archivo__/codigo/articulos/cuadro/cuadro_arriba.gif')
   10     top no-repeat,
   11     url('__archivo__/codigo/articulos/cuadro/cuadro_abajo.gif')
   12     bottom no-repeat,
   13     url('__archivo__/codigo/articulos/cuadro/cuadro_medio.gif')
   14     center center repeat-y;}
   15 </style>
   16 
   17 <div class="cuadro_ejemplo">
   18 Esto es un bloque con varias imágenes de fondo.<br>
   19 Si no ves el efecto correctamente, tu navegador no lo soporta.
   20 Prueba con Chrome o Safari.
   21 </div>

   22 

Referencias

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados