noidem: Repeat-x für bestimmte Länge

Beitrag lesen

Hiho,

Ich sitz schon seit einer Stunde vor einem Problem, welches sich nicht lösen lässt und ich auch nichts gefunden habe über Google.

Mein Problem ist eigentlich ganz Simpel, ich habe auf einer Webpräsenz ein DIV angelegt. In diesem DIV möchte ich nun abgerundete Ecken haben.

Jetzt habe ich 3 Bilder.
Den linken Teil mit den zwei abgerundeten Ecken links
Den mittleren Teil, der repeatet wird
Den rechten Teil, mit den zwei abgerundeten Ecken rechts

Nun möchte ich gerne den linken Teil anzeigen lassen, dann den mittleren Teil für eine bestimmte Länge repeaten, dann am schluss den rechten Teil anzeigen lassen.
Im CSS sieht es momentan so aus:

background-image: url("img/left.png"), url("img/center.png"), url("img/right.png");
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: left, center, right;
width: 200px;

Das linke Bild wird mir auch angezeigt. Ebenso das mittlere, welches repeatet wird. Allerdings wird das endlos repeatet, ohne dass am Schluss das rechte Bild folgt.

Gibt es hierfür irgendwie Abhilfe?

Alternativ könnte ich einfach die ganze Box als ein Bild einfügen. Dachte aber, so wäre es platzsparender und "eleganter" gelöst.