CSS background-position mit Prozentangaben

Transkript

1 CSS background-position mit Prozentangaben In der folgenden Abhandlung soll die Positionierung von Hintergrundbildern mit der CSS Eigenschaft background-position beleuchtet werden. Insbesondere die Bestimmung der Position mit Hilfe von Prozentangaben werden wir behandeln. Die zugelassen Werte für die Positionierung sind Wortbezeichnungen - left, right, top, bottom - Grössen- bzw. Längenangaben - px, em, pt - oder eben Prozentangaben. Auch Kombinationen der verschiedenen Möglichkeiten sind erlaubt mit Ausnahme von folgender: Wortbezeichnung (s.o.), auch Schlüsselwort genannt, in Verbindung mit einer Prozentangabe. Bei der Positionsangabe der background-position werden zwei Werte angegeben. Insofern es sich nicht um eine Wortbezeichnung handelt, welche ja für sich spricht, gibt der erste Wert die horizontale, der zweite Wert die vertikale Position an. Die Referenz des Bildes ist immer die linke obere Ecke desselben. Nun stellt sich die Frage warum eine so einfache Sache von mir einer Abhandlung für würdig befunden wurde. Ganz einfach: Die Positionierungsangabe in Prozent ist gar nicht so einfach und hat ihre Tücken. Es ist nämlich nicht nur die Grösse des das Hintergrundbild bergenden Containers sondern auch die Grösse des Hintergrundbildes selbst von Wichtigkeit bei der Berechnung. Betrachten wir ein Beispiel: Stellen wir uns einen Container vor, sagen wir ein div -Element, welchem wir zur Vereinfachung der Erklärung eine Breite von 100px geben. In diesem Container soll ein Hintergrundbild mit der Breite von 10px positioniert werden. Die Definition der Prozentangaben legt nun fest, dass background-position: 0% 0%; bedeutet, dass das Bild mit seiner linken oberen Ecke in der linken oberen Ecke des Containers dargestellt wird Abb.1. left 0% Container width 100px

2 und background-position: 100% 0%; dass das Bild mit seiner rechten oberen Ecke in der rechten oberen Ecke des Containers dargestellt wird. Abb.2. left 100% Container width 100px (Wir betrachten der Einfachheit halber ersteinmal nur die horizontale Position.) Nun stellt sich die berechtigte Frage, wie denn die Position des Hintergrundbildes in Abb % sein kann, da das Bild doch dann eigentlich ausserhalb des Containers liegen müsste und nicht innerhalb. 100px => 100% (wir erinnern uns, der div -Container soll 100px breit sein) und da alle Positionsangaben die linke obere Ecke des Bildes referenzieren (siehe Markierung in Abb.1. und Abb.2.), müsste das Bild doch dann mit seiner linken oberen Ecke rechts gleich angrenzend an den div -Container aber eben ausserhalb (also im Browser nicht sichtbar) positioniert sein. Nun, es ist aber nun einmal definiert wie oben gesagt (Abb.2.). Das heißt aber, daß das Hintergrundbild bei der Angabe von 100% für left mit seiner (ja massgeblichen) linken oberen Ecke nur bei 90px, also 90% des Containers liegt. Hier liegt die Crux. Um bei einer Verschiebung des Bildes nach rechts von der Position 0% ausgehend bei 90px auf 100% Prozent zu kommen, muß ich ja den verbliebenen Raum zwischen 0% (0px von links) und 100% (90px von links) so aufteilen, daß ich am Ende hinkomme, also bei 90px bei 100% bin. Es liegt auf der Hand, dass ich bei, sagen wir, einer Verschiebung von 10% im Container, 10 Prozent der Hintergrundbild-Breite weniger verschieben muß um hinzukommen, also nur 9px: 10 x 9px = 90px und 10 x 10% = 100%. Damit hätte ich erfüllt, dass das Hintergrundbild bei einer Position von 100% left mit seiner linken oberen Ecke bei 90px des div -Containers sitzt. Genauso verhält es sich denn auch. Es wird bei einer Verschiebung um 10% zur Verdeutlichung ersteinmal 10% der Hintergrundbildbreite im Bild selbst nach rechts verschoben und dieser Punkt gilt dann als neuer Referenzpunkt, quasi als "neue linke obere Ecke" und diese liegt im umgebenden div -Element dann bei 10% => 10px. In Wahrheit, da ja eigentlich die linke obere Ecke der Hintergrundgrafik immer die Referenz ist, haben wir nur um 9px verschoben.

3 Worte können verwirrend sein wenn man einen nicht ganz offensichtlichen Zusammenhang erklären möchte, weshalb auch nun eine Abbildung folgt, welche die schrittweise Verschiebung um 10% nach rechts darstellt. Abb.3. left 0% left 100% left 10% left 20% left 30% Darstellung der horizontalen Positionierung eines background-image mittels Prozentangabe (vertikale Pos. ersteinmal vernachlässigt) left 40% left 50% left 60% left 70% left 80% left 90% left 100% width: 10px width: 10px width: 10px width: 10px width: 10px width: 10px width: 10px width: 10px width: 10px width: 10px total width: 100px tatsächlicher Eckpunkt der positionierten Grafik Punkt zur Berechnungshilfe tatsächlicher Punkt und Berechnungshilfe fallen zusammen

4 Es versteht sich nun warum wir für den Container eine Breite von 100px und für das Hintergrundbild eine von 10px gewählt haben. So lässt sich zur Verdeutlichung leichter rechnen. All das bisher gesagte gilt in analoger Form auch für eine vertikale Verschiebung, wenn wir die Positionierung denn zur Erklärung einmal so nennen möchten. Das heisst, dass beispielsweise folgende Angaben background-position: 10% 10%; die linke obere Ecke der Grafik bei 9px left und 9px top des umgebenden Elementes sitzen würde. Es ergibt sich ausserdem, dass eine Position genau in der Mitte des Containers so zu bewerkstelligen wäre: background-position: 50% 50%; was ja dann bezeichnungstechnisch auch Sinn macht. Eine Besonderheit folgt noch aus all dem, dass nämlich, wenn die Hintergrundgrafik genauso groß wie der sie beherbergende Container ist, sie immer an der gleichen Position sitzt und somit immer den Container ausfüllt, egal welche Prozentangaben ich für left oder top mache. Warum? Nun, bei 10% wähle ich ersteinmal den Referenzpunkt in der Grafik, also 10% left, => 10px bei Breite der Grafik von 100px und diesen Referenzpunkt setze ich nun auf 10 % left, => 10px des Containers, bei Breite des Containers von ebenfalls 100px. Da sässe er aber bei Angabe von 0% 0% ohnehin schon. Das gleiche gilt für 20%, 30% usw. und für alle nicht glatten Prozentzahlen. Schauen Sie sich Abb.4. ganz unten an um sich das besser vorstellen zu können. Es stellt sich nun die Frage warum ich bei einer solch komplizierten Rechnung nicht gleich immer px oder pt oder em angebe. Nun, die Prozentangaben leisten hervorragende Dienste bei sog. Fluid Designs, also flexiblen Breiten von Containern, um den verschiedenen Bildschirmgrössen der Menschen die Ihre Seite später im Browser anschauen gerecht zu werden. Bei Fluid Designs werden so gut wie keine absoluten Breitenangaben gemacht, weshalb sich also genaue Pixelangaben für Hintergrundbildpositionen meist ausschliessen. Auch bei Nutzung sog. Sprites Sprites sind Bilder in welchen mehrere auf der Seite verwendete Grafiken in einem Bild zusammengefasst werden. Das veringert die Ladezeiten einer Seite, da nur ein Bild geladen werden muß. Die Position wird dann mit background-position entsprechend den Erfordernissen angegeben kann die Angabe der Hintergrundbildposition in Prozent von Vorteil sein. Bei all dem sollte folgendes beachtet werden:

5 Bei all dem sollte folgendes beachtet werden: Je nach Dimension des Hintergrundbildes - und diese ist ja immer bekannt - oder je nachdem wie ich mein Sprite-Bild verschieben muß um den Teil darzustellen den ich darstellen möchte, kann es zu Kommazahlen bei der Prozentangabe kommen und da machen manche Browser Zicken weil sie verkehrt runden, was dann bewirkt, dass die beabsichtigte Position nicht exakt dargestellt wird. Weitere Abbildungen Abb.4. Hintergrundgrafik: errechnete Referenzpunkte 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% Container: errechnete Referenzpunkte Wie deutlich zu sehen ist, fallen die Referenzpunkte für die Hintergrundgrafik und die des Containers genau aufeinander, was an sich nichts besonderes ist. Dies trifft auch zu, wenn die Grafik kleiner ist als der Container (s. Abb.3.). Hier allerdings, da die Grafik die gleiche Grösse wie der Container hat, bleibt die Grafik bei jeder Prozentzahl an gleicher Stelle. Zum Blogpost: Online-Beispiele: