Hintergrundgrafik für verschiedene Elemente

[LdF]

Ich suche momentan nach einer Lösung, wie ich ein (mehr oder weniger) beliebiges Element mit einer speziellen Hintergrundgrafik versehen kann.
Ich möchte z.B. einen Link mit einer Hintergrundgrafik austatten, die an einer zentralen Stelle definiert ist.
-----schnipp-----
<a href="pfad/zur/datei.html" class="klasse">Testlink</a>
-----schnapp-----
Dieser Textlink soll nun ein Hintergrundbild haben. Das Problem ist nun leider, dass das Hintergrundbild nicht skaliert, wenn ich es über CSS definiere.
-----schnipp-----
.klasse {
background-image: url(pfad/zum/bild.jpg);
}
-----schnapp-----
Erstens sieht es unschön aus, wenn der Besucher die Schrift in seinem Browser vergrößert und außerdem müsste ich so für jedes (verschiedengroße) Element jeweils eine eigene (entsprechend große) Grafik definieren. Das würde wieder mehr Aufwand und Traffic bedeuten, ganz davon abgesehen, dass es absolut nicht semantisch ist.

Hat jemand von euch eine Idee wie man meinen Wunsch realisieren könnte? Am besten natürlich ohne Javascript oder sonstigen Skriptsprachen.
Gruß.

[Powl]

Hallo,

Das hängt von der Art der Grafik ab. Eine Möglichkeit besteht darin, das Hintergrundbild endstprechend größer zu gestalten und mit CSS z.B. zu zentrieren. Vergrößert sich das Element, wird eben mehr der Grafik dargestellt. Der Mittelpunkt ist aber nach wie vor zentriert.
Kompliziertere Grafiken, z.B. 'runde Ecken' benötigen dann aber einen 'Schiebetüreffekt' und somit auch zusätzliche Elemente um die Slices aufzunehmen. Begriffe in ' ' sollten als Suchbegriffe für weitere I-Netrecherche hilfreich sein.

netten Tag
^da Powl

[r. floren]

Nimm doch einfach eine Grafik mit einem link. also:
<img src="datei.gif" href="link zur datei" />

mfg. r. floren