Hola!
Vereis, tengo esto:

y quiero conseguir esto:

con este código:
<div class="container">
<div class="barra">
<div class="barra-i"></div>
<div class="barra-d"></div>
</div>
</div>
y este css:
.container{
width: 700px;
}
.barra{
background: url(/barra.png) repeat-x; /* esto me funciona bien */
position: relative;
}
.barra-l{
background: url(/l.png) repeat-x; /* el borde izquiero se ve bien DENTRO del contenedor, pero al intentar sacarlo es cuando se corta, y se ve sólo la parte que está dentro del contenedor */
position: absolute;
left: -40px;
bottom: 0;
}
.barra-r{
background: url(/r.png) repeat-x; /* igual que antes */
position: absolute;
right: -40px;
bottom: 0;
}
pero no hay manera :/
He probado poniéndole float, overflow: visible; e incluso z-index (nada que ver, pero lo he intentado por si acaso), pero aún así no hay manera

Saludos

Has pensado en usar los fondos multiples de css?
background: url(l.png) top left no-repeat, url(r.png) top right no-repeat, url(barra.png) top left repeat;

Hola,

Perdonar que me meta en este tema pudiendo hacer Spam pero lo que acabas de decir west me parece bastante interesante y me gustaría saber si podrías ampliar o hacer un tutorial acerca de eso de los backgrounds múltiples en CSS.

Un saludo,
Siquillote.

Has pensado en usar los fondos multiples de css?
background: url(l.png) top left no-repeat, url(r.png) top right no-repeat, url(barra.png) top left repeat;

Tengo entendido que no es compatible con los navegadores antiguos ( ya que es css3, y yo quiero que sea compatible, por eso lo hago así :/ )

Hola,

Perdonar que me meta en este tema pudiendo hacer Spam pero lo que acabas de decir west me parece bastante interesante y me gustaría saber si podrías ampliar o hacer un tutorial acerca de eso de los backgrounds múltiples en CSS.

Un saludo,
Siquillote.

Opino lo mismo, estaría bien un tutorial sobre eso