lo de una sola imagen queda bien pero aun es un poco pesadita "peor si es un .png", pues seria mejor recortarla no? asi lo hago yo
Código:
<div id="contenedor">
<div id="superior">
<!-- aca el primer borde superior como fondo -->
</div>
<div id="centro">
<!-- aca como fondo una imagen repetida en (y) -->
</div>
<div id="inferior">
<!-- la misma operacion llamando la imagen como fondo que no se repita -->
</div>
</div>
Eso sería todo! luego con unas cuantas declaraciones para llamar las imagenes como fondo y listo, no pesa tanto y es compatible con todos los navegadores
ejem.
Código:
div#contenedor {
width : 200px;
height : auto;
margin : 1cm auto; /* para centrar */
padding : ?;
background-color : #fff;
color : #000;
}
div#superior{
margin : 0;
padding : 0;
width : 200px;
height : 20px; /* por ejem */
background : #fff url('../directorio/borde_sup.jpg') no-repeat top left;
color : #000;
}
div#centro {
background : #fff url('../directorio/centro.jpg') repeat-y top left;
color : #000;
margin : 0;
padding : ?;
width : 200px;
height : 250px;
}
div#inferior {
margin : 0;
padding : 0;
width : 200px;
height : 20px; /* por ejem */
background : #fff url('../directorio/borde_inf.jpg') no-repeat top left;
color : #000;
}
Como les digo a mi me funciona perféctamente de esa forma y no hay que complicarse tanto la vida...