3 divs in einer Reihe mit Hintergrundbild

[Strahli]

Hallo,
ich möchte gerne einen Balken mit abgerundeten Ecken über einem Text platzieren.

Hierzu habe 3 Hintergrundgrafiken zusammengesliced.

Eine fürs linke Div (die linke Ecke), eine für die Mitte welches repeat-x bekommt (es ist ein flexibles Layout mit 100% width), und eines für das rechte div (die rechte Ecke).

Nun schaffe ich es irgendwie nicht das so zusammenzufriemeln, dass es so passt wie ich meine. Meine Versuche im HTML:

<div class="li">  
<div class="mi">  
<div class="re">  
  <div class="inhalt"> Überschrift  
  </div>  
</div>  
</div>  
</div>

Im CSS:

  
.li{  
background:url('../styleImages/backgrounds/img1.png');  
background-repeat: no-repeat;  
height: 30px;  
width: 9px;  
  
}  
  
.mi{  
background:url('../styleImages/backgrounds/img2.png');  
background-repeat: repeat-x;  
  
}  
  
.re{  
background:url('../styleImages/backgrounds/img3.png');  
background-repeat: no-repeat;  
height: 30px;  
width: 9px;  
}  

Was muss ich noch beachten, vielleicht kann mir ja wer helfen?

Gruß