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

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??

Gracias de antemano!

preguntado el 08 de noviembre de 11 a las 18:11

If you're using the multiple backgrounds property, why not just use border-radius? -

I'm using a fancy-schmancy shadow effect at the bottom (not a css-one) -

I've never used it, so I don't know if it'll work, but maybe background-clip? dev.opera.com/articles/view/css3-border-background-boxshadow/… -

2 Respuestas

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 al border-color. The background will always go bajo el Tema G: Cómo recibir pagos por adelantado del crédito tributario por hijos the border, so if your border is solid the background will still be invisible.

respondido 09 nov., 11:00

This is what I'm using and its still overlapping: border-top-width:4px; border-bottom-width:19px; 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; background-clip:border-box, border-box, padding-box; - Brian Barrus

Parece que ambos background-origin Y background-clip must be set for it to work correctly. - philipd

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

respondido 08 nov., 11:23

Just curious if this would be a cross browser solution, considering IE is a mess. - ehime

Have not tested, but any older browser not recognizing :after pseudoelement it would not work on. - ScottS

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.