Also ich finde die Lösungen hier alle reichlich kompliziert.
Schneide dein Tab-Bild einfach wie folgt zurecht:
=========) [tab_right.png // mach es mhm... 350px breit oder so, je nachdem was die maximale breite sein soll]
(= [tab_left.png]
Danach bauste es wie folgt auf:
<a class="tab_link"><span>Dein Text</span></a>
Im CSS-Code legst du dann fest:
a.tab_link {
background: url(tab_right.png) no-repeat 100% 0;
....
}
a.tab_link span {
background: url(tab_left.png) no-repeat;
// evtl. noch nen display:block;
padding: 0 5px // seitenabstand kannst du beliebig wählen
}
Alles anzeigen
so mehr brauch man eigentlich nicht, evtl. Anpassungen für den Internet Explorer aber das müsstest du gucken.
Ist leider ungetestet, da ich gerade im Urlaub bin, aber spontan würde ich sagen, das geht
Alternativen wären mit :before und :after Pseudoelementen (was allerdings im IE nicht funktionieren wird) und mit CSS3 über "multiple-backgrounds".
Optimal kannst du auch ein CSS-Sprite nutzen und mit background-position arbeiten
Anmerkung:
Wenn du die Tabs in einer Liste verwendest kannst du dir die "<span>"-Elemente sparen, da du dort das "<li>"-Element zur Verfügung hast.