CODEWITHSUNDEEP
cssbackground-image
Brian Barrus
Brian Barrus

Reputation: 515

CSS limited background repeat (multiple background images)

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!

Upvotes: 5

Views: 13012

Answers (2)

philipd
philipd

Reputation: 163

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.

Upvotes: 8

ScottS
ScottS

Reputation: 72281

Whatever your element is that you are applying the images to, try doing the following (I'll assume div for sake of illustration):

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;
}

Upvotes: 0

Related Questions