Hola compañeros,
tengo un pequeño problema al realizar la maquetación de una caja. Se trata de un envoltorio, en 3 capas, para crear un borde redondeado, envolviendo el contenido.
Las cajas son:
Código HTML:
div class="bg_middle">
<div class="bg_top">
<div class="bg_bottom">
...
</div>
</div>
</div> y el css asociado es el siguiente
Código:
.bg_top{
background: url('/static/media/images/app/boxes/upper.png') no-repeat left top;
}
.bg_middle{
background: transparent url('/static/media/images/app/boxes/middle.png') repeat-y left top;
}
.bg_bottom{
background: url('/static/media/images/app/boxes/bottom.png') no-repeat left bottom;
padding: 15px 30px 20px 30px;
}
donde upper y bottom son la cabecera y el pie de la caja, con sus bordes, y middle es unicamente una imagen con dos bordes personalizados a derecha e izquierda, y que quiero que se replique a lo alto, para cerrar las caras izquierda y derecha.
Pues bien, mi problema es con la middle.png. Todas las imagenes tienen el fondo transparente, pero el montaje acaba desastroso porque middle.png se me replica de arriba a abajo, traspasando los bordes de las otras dos imagenes.
He probado a trasladar la capa .bg_middle por debajo de las otras dos, pero el resultado es aun peor: sobrepasa las otras dos imagenes, y ya no se ven ni los bordes.
Algun consejo acerca de que estoy haciendo mal?
PD: los bordes son redondeados. Dejo una imagen del resultado final a continuación
