Question

I am trying to make a cool background effect (with alpha transparency and rounded corners) for a drop-down menu with a single CSS entry.

I have a top cap (180 x 4 px), a bottom cap (180 x 20px) and a repeating middle (180 x 2px).

Here is my existing relevant CSS:

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;

The problem is that the middle section which needs to be expandable/tilable is repeating all the way under the top and bottom caps–such that my rounded corners are now square because they have the repeating middle under them.

Is there some way to prevent the multiple backgrounds from overlapping??

Thanks in advance!

Answer 1

Background-origin and/or background-clip should do the trick. Just set top & bottom borders equal to the height of your cap graphics, then set drop_middle to background-clip:padding-box

---

EDIT: Here is a complete solution, but for a horizontal orientation:
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;
}

What got me stuck was the transparent on the border-color. The background will always go under the border, so if your border is solid the background will still be invisible.