Caja con imagenes

[cristian_cena]

Hola ruben:

Podes hacer que el div crezca y tener al mismo tiempo una imagen como fondo con los bordes degradados (en reemplazo de box-shadow) usando un sprite css y añadiendo cajas extras para mostrar los bordes.

Este ejemplo será útil para ilustrar el caso, luego lo completas a tu necesidad:
1ro en photoshop o similar creas la imagen para el sprite. Luego...

Código HTML:

<div class="top"></div> <!-- aca mostras la parte de la imagen con los bordes izq y der superiores -->
<div class="middle">... contenido ...</div>
<div class="bottom"></div><!-- aca mostras la parte de la imagen con los bordes izq y der inferiores-->
 

Código CSS:

/*el ancho y el sprite es comun para los 3 elementos*/
.top, .middle, .bottom {width:...;  background:url('ruta/imgsprite.xxx') 0 0 no-repeat;}
/*el alto de top y bottom generalmente es el mismo, middle crecerá según el contenido*/
.top, .bottom{height:...;}
 
.top{
background-position: ... ;
}
.middle{
background-position:... ;
background-repeat:repeat-y; /*repetis la imagen en y para que crezca según el contenido*/
}
.bottom{
background-position: ... ;
}
 

O usas esto, o usas css3 o usas una imagen fija como venis haciendo. Otra forma no conozco.

En el link que te pase en la respuesta anterior tenes un ejemplo de como hacer andar un sprite, si aún así siguen las dudas, podes leer el material que sugiero en ese mismo link, si aún así no logras entender como trabajar con sprites pregunta y lo vemos. Pero primero por favor lee el material.

Un saludo.