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ß

[strhn]

Versuch es mal irgendwie so. Kann sein, daass ich noch nen dreher drin hab.

div.li{
background:url('../styleImages/backgrounds/img1.png') 0% 100% no-repeat;
margin 0px 0px 0px 0px;
}

div.mi{
background:url('../styleImages/backgrounds/img2.png') 0% 0% repeat-x;
margin 0px 5px 0px 0px;
}

div.re{
background:url('../styleImages/backgrounds/img3.png') 0% 0% no-repeat;
margin 0px 0px 0px 5px;
}

div.inhalt{
width:auto;
height:30px;
padding:5px;
margin:0px;
}

[Strahli]

Versuch es mal irgendwie so. Kann sein, daass ich noch nen dreher drin hab.

div.li{
background:url('../styleImages/backgrounds/img1.png') 0% 100% no-repeat;
margin 0px 0px 0px 0px;
}

div.mi{
background:url('../styleImages/backgrounds/img2.png') 0% 0% repeat-x;
margin 0px 5px 0px 0px;
}

div.re{
background:url('../styleImages/backgrounds/img3.png') 0% 0% no-repeat;
margin 0px 0px 0px 5px;
}

div.inhalt{
width:auto;
height:30px;
padding:5px;
margin:0px;
}

Hi,
erstmal vielen Dank für deine Antwort. Wir kommen so tatsächlich der Sache nähe. Ganz passt es jedoch nicht. Ich hab das ganze so umgestellt:

  
div.li{  
background:url('../styleImages/backgrounds/img3.png') 100% 100% no-repeat;  
margin 5px 0px 0px 0px;  
}  
  
div.mi{  
background:url('../styleImages/backgrounds/img2.png') 0% 0% repeat-x;  
margin 0px 5px 0px 0px;  
}  
  
div.re{  
background:url('../styleImages/backgrounds/img1.png') 0% 0% no-repeat;  
margin 0px 0px 0px 5px;  
}  
  
div.inhalt{  
width:auto;  
height:30px;  
padding:5px;  
margin:0px;  
}

Das Ganz sieht dann jetzt so aus:

Es scheint mir, alsob die Mitte, mit dem Bild repeat-x über die Ecken hinausgeht. Desweiteren weiss ich nicht, wie ich das Bild in der rechten Ecke platzieren muss (img3.png), das steht nämlich komisch versetzt jetzt.

Schönen Gruß