Hintergrundbilder mit Pixel- oder Prozentwerten relativ zu egal welcher Kante positionieren

Background-position 3-4 Werte Syntax

Positioniert man ein Hintergrundbild mit Pixel- oder Prozentwerten, wird die linke obere Ecke des jeweiligen Elements als Referenzpunkt verwendet. Gibt man dem Element beispielsweise background-position: 20px 40px, bewegt sich das Bild um 20px nach rechts und 40px nach unten, ausgehend von der oberen bzw. linken Kante des Elements. Mit CSS2.1 konnte man nur relativ zu eben diesen Kanten positionieren und nicht beispielweise 40px von rechts und 20px von unten.

Mit CSS3 ist das aber schon seit einer ganzen Weile möglich. Dafür gibt es eine 3 bzw. 4 Werte Syntax. Man gibt zuerst die Seite an von der man ausgehen möchte und dann den Pixel- oder Prozentwert um den das Bild verschoben werden soll.

background-position: right 40px bottom 20px;

Lässt man den zweiten Wert weg, ist dieser standardmäßig auf 0.

background-position: right 40px bottom;

Alle aktuellen Browser beherrschen diese Schreibweise und viele schon seit mehreren Versionen. In Internet Explorer kann man diese Technik ab Version 9 anwenden. Ein Live-Beispiel gibt es in diesem Codepen zu sehen.

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *