Möchte man für ein Element auf seiner Website ein Hintergrundbild einbinden, schreibt man normalerweise eine Zeile dieser Art in seine CSS-Datei:

background: url(bild1.jpg) top left repeat-x #eee;

Für ein weiteres Element erstellt man eine zweite Grafik und bindet diese analog zur ersten ein.

Der Nachteil dieser Vorgehensweise ist, dass für jedes einzelne Bild (aber auch jede andere Datei) beim Aufrufen der Webseite im Browser ein HTTP-Request gemacht werden muss. Da aber nur eine bestimmte Anzahl von parallelen Requests ausgeführt werden kann, verlangsamt sich der Seitenaufbau. Um die aufzubauenden HTTP-Verbindungen zu reduzieren, kann man CSS-Sprites nutzen und theoretisch so alle über url() referenzierten Hintergrundgrafiken einer Website in eine Bilddatei zusammenfassen.

Um diese Arbeit nicht per Hand erledigen zu müssen, gibts es Generatoren, die die Dateien zusammenstellen:

Als Ergebnis erhält man eine Bilddatei und die background-position der einzelnen Bilder:

Jetzt muss noch die eigene CSS-Datei angepasst werden:

  1. Dem übergeordneten Container der Elemente mit Hintergrund wird die neue Bilddatei zugewiesen: background:url(result.png);
  2. Anstatt einem Pfad zur Bilddatei wird bei den einzelnen Elementen jetzt nur noch die Position des gewünschten Bildes angegeben, z.B. background-position: 0px -54px;

Bei Hover Effekten mit Grafiken bieten CSS-Sprites den Vorteil, dass alle Grafiken bereits geladen wurden und es zu keiner Verzögerung beim Hover-Effekt kommt.

Allerdings kann diese Technik auch zu unerwünschten Effekten führen. Möchte man eine Grafik in X-Richtung wiederholen, sollte man darauf achten, dass die Grafiken in der Datei untereinander zusammengefügt wurden. Da man mit CSS nur die Position angeben nicht aber den Bereich eingrenzen kann, würden bei nebeneinander liegenden Grafiken die daneben liegenden sonst zum Vorschein kommen. Umgekehrt verhält es sich mit Wiederholung in Y-Richtung. Hier sollten die Bilder horizontal angeordnet sein.

tanja_port
CSS,HTML,Programmierung