Repeat-x für bestimmte Länge

[noidem]

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.

[Take]

Moin,

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.

border-radius ist dein Freund.

Jetzt habe ich 3 Bilder.

Ihh, abgerundete Ecken mit Bildern... :D

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.

Schau dir mal diesen Artikel an, wenns unbedingt Bilder sein sollen...

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;

Wenn du schon CSS3 nimmst (multiple Backgrounds _sind_ CSS3) kannst du doch auch border-radius nehmen, oder?

Gruß,
Take

[noidem]

Wenn du schon CSS3 nimmst (multiple Backgrounds _sind_ CSS3) kannst du doch auch border-radius nehmen, oder?

Gruß,
Take

Vielen Dank schonmal! Bin noch recht neu und kannte das mit Border-Radius noch nicht. Dachte es wäre am einfachsten, dies mit 3 Bildern zu lösen. Bin natürlich für sämtliche Lösungsvorschläge offen.

Das Problem ist, dass ich links und rechts einen kleinen schwarzen Schatten habe zum übergang zum Inhalt. Dies lässt sich soweit ich weiss nicht mit CSS machen?

[Take]

Moin,

Das Problem ist, dass ich links und rechts einen kleinen schwarzen Schatten habe zum übergang zum Inhalt. Dies lässt sich soweit ich weiss nicht mit CSS machen?

box-shadow - CSS3 rules :D
Musst dann halt damit leben, dass IE < 9 keinen Schatten mit CSS können, aber müssen Webseiten überall gleich aussehen? Das gilt besonders für dIEses Browserimitat aus Redmond :D

Gruß,
Take