Repetición de fondo limitada de CSS (varias imágenes de fondo)

Question

Estoy tratando de crear un efecto de fondo fresco (con transparencia alfa y esquinas redondeadas) para un menú desplegable con una sola entrada de CSS.

Tengo una tapa superior (180 x 4 px), una tapa inferior (180 x 20px) y un medio repetitivo (180 x 2px).

Aquí está mi CSS relevante existente:

background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png'); 
background-position:left top, left bottom, 0px 10px; 
background-repeat:no-repeat, no-repeat, repeat-y; 

El problema es que la sección media, que tiene que ser expansible/tilable es repetir todo el camino bajo las tapas superior e inferior - de tal manera que mis esquinas redondeadas ahora son cuadrados porque tienen el centro repetitivo debajo de ellos.

¿Hay alguna manera de evitar que los fondos múltiples se superpongan?

¡Gracias de antemano!

Answer 1

Background-origin and/or background-clip debería hacer el truco. Sólo set top & bordes inferiores iguales a la altura de sus gráficos casquillo, a continuación, establecer drop_middle a background-clip:padding-box

---

EDIT: Aquí es una solución completa, pero para una orientación horizontal: http://jsfiddle.net/nGSba/

#box 
{ 
    display: inline-block; 
    margin: 1em; 
    padding: 9px; 
    border-left:9px solid transparent; 
    border-right:9px solid transparent; 
    background-image: url(http://s11.postimage.org/ufpdknvjz/left.png), 
      url(http://s11.postimage.org/6ng294tj3/right.png), 
      url(http://www.css3.info/wp-content/themes/new_css3/img/main.png); 
    background-repeat: no-repeat, no-repeat, repeat-x; 
    background-position: left top, right top, left top; 
    background-origin: border-box,border-box,padding-box; 
    background-clip: border-box,border-box,padding-box; 
} 

Lo que me atascó fue el transparent en el border-color. El fondo siempre irá a bajo el borde, por lo que si su borde es sólido, el fondo seguirá siendo invisible.

Answer 2

Sea cual sea su elemento es el que está aplicando a las imágenes, intente hacer lo siguiente (voy a suponer div por motivos de ilustración):

div { 
    background-image: url('images/drop_top.png'), url('images/drop_bottom.png'); 
    background-position:left top, left bottom; 
    background-repeat:no-repeat, no-repeat; 
    position: relative; 
} 

div:after { 
    position: absolute; 
    top: 10px ; /* whatever your top image height is */ 
    bottom: 10px; /* whatever your bottom image height is */ 
    left: 0; 
    right: 0; 
    z-index: -1; 
    background-image: url('images/drop_middle.png'); 
    background-position: left top; 
    background-repeat: repeat-y; 
}