CSS Sprites - Background Repeat Problem
CSS Sprites sind wirklich was feines, man kann einen Hover Effekt ganz einfach mit der “:hover” Pseudo Klasse des a-Tags von HTML realisieren, man benötigt keinen Preloader für den Hover-Bildaustausch, und man spart sich ein paar HTTP-Requests, da weniger Einzel-Daten geladen werden müssen. Doch ein Problem konnte ich bislang damit nicht lösen, nämlich wenn ein Teil des Sprites als Background-repeat benutzt werden soll.
Bei einem aktuellen Projekt habe ich gerade genau das Problem. Ich habe eine Datei, in der ich einige PNG24 Grafiken (die mit Verlaufs-Transparenz) zusammengefasst habe, die “normalen” Grafiken machen auch keinerlei Probleme, doch was passiert mit den Grafiken, die als “background-repeat” verwendet werden? Folgender CSS-Code funktioniert leider nicht wie gewollt:
#box2r {width: 676px; padding-bottom: 5px; background: url('img/png24_set.png') 0px -26px; background-repeat: repeat-y;}
Es handelt sich um die “Hauptbox” deren Höhe durch den Inhalt vorgegeben ist. Ich möchte aus dem Sprite die Teilgrafik haben, die 676px breit und 1px hoch ist und möchte diesen Teil über die komplette Höhe der Box legen (normalerweise realisiert durch “background-repeat: repeat-y”), doch leider funktioniert das nicht mit Sprites :(
Es gibt zwar eine Möglichkeit, aber ich halte die nicht für wirklich brauchbar, da man ziemlich eingeschränkt wird und für meinen Fall ist es keine Alternative, hat sonst noch jemand eine Idee wie man das lösen könnte?
