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?
Verwandte Artikel
- MySQL Assoziation Problem - Anzeige von Verbindungen
- Browserweiche für Anzeigenkrüppel
- Browserweiche für Anzeigenkrüppel
- Runde Ecken ohne Grafiken in Css erstellen
- Eigene Rahmen mit kleinen transparenten Gifs gestalten
Tags: background, css, hover, preloader, repeat, sprites
3 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Hi,
du könntest die Hauptbox mit Overflow:Hidden und position:relativ versehen und innerhalb dessen eine Box mit der festen width und einer maximalen height (so dass alle Zustände des bg reinpassen) und diese absolut positionieren. Bei hover wechselst du daraufhin die position entsprechen und hast den erwünschten hover-effekt.
Nachteil daran ist, dass der hover nicht auf dem link liegt, sondern auf der box. Das ist bei transparenten PNGs und dem IE6 problematisch. Allerdings gibt es dazu einen htc-Trick:
http://www.xs4all.nl/~peterned/csshover.html
http://www.twinhelix.com/cgi-bin/forum.pl/iepngfix/299/p=4
Darüber hinaus sollte es problemlos funktionieren.
LG,
Christian
Das Thema wurde auch aktuell im Technikwürze-Podcast behandelt: http://technikwuerze.de/podcast/technikwuerze130/
Ich glaube ein solcher Anwendungsfall ist im CSS nicht vorgesehen und damit auch nicht realisierbar. Zumindest nicht auf “normalem” Weg.
Der Repeat ist ja dafür ausgelegt eine Grafik zu wiederholen und nicht einen Rahmen, der den angezeigten Bereich einer Grafik begrenzt.
Mit den Sprites sollte man es auch nicht übertreiben, bin ich der Meinung. Wenn man vieles zusammenfasst ist es ja gut, aber für sich wiederholende Hintergrundgrafiken sehe ich keine Probleme, das in einer eigenständigen Datei “auszulagern”.