CSS/Eigenschaften/background-position
Die Eigenschaft background-position bestimmt, an welcher Stelle sich eine bestimmte Ecke des Hintergrundbildes befinden soll, in Bezug auf die gleiche Ecke des Elements, in dem sich das Hintergrundbild befindet. Standardmäßig wird die linke, obere Ecke verwendet. Wird ein Schlüsselwort wie right, center oder bottom verwendet, ändert sich der Bezugspunkt.
Die erlaubten Werte bestehen aus einer Angabe für die X-Ausrichtung und einer Angabe für die Y-Ausrichtung. Die Ausrichtung kann durch ein Schlüsselwort angegeben werden, oder durch eine Längen- oder Prozentangabe.
- Wird eine der beiden Ausrichtungen durch eine Längen- oder Prozentangabe angegeben, muss die X-Ausrichtung als erstes genannt werden.
- Wird nur eine Ausrichtung als Längen- oder Prozentangabe angegeben, ist es die X-Ausrichtung. Die Y-Ausrichtung ist dann
center - Werden beide Ausrichtungen als Schlüsselwort angegeben, kann optional (außer bei
center) ein Offset hinzugefügt werden. Da die Schlüsselworte für X- und Y-Ausrichtung unterschiedlich sind, ist die Reihenfolge hier frei. - Wird das Schlüsselwort
centerverwendet, ist der Bezugspunkt nicht mehr eine Ecke, sondern der Mittelpunkt der Seite, entlang der ausgerichtet wird.
Prozentwerte beziehen sich auf die Differenz zwischen Element- und Bildbreite. Ist ein Element beispielsweise 600px breit und das Hintergrundbild 350px, so sind noch 250% zu verteilen. Eine X-Ausrichtung von 70% würde bedeuten, dass 70% dieser 350px links vom Hintergrundbild liegen.
Eine ausführlichere Beschreibung findet sich im unter „Siehe auch“ verlinkten CSS Tutorial.
| erlaubte Werte |
Positionsangaben als Länge, Prozentwert oder Schlüsselwort
|
|---|---|
| anwendbar auf | alle Elemente (Unterschied Tag Element Attribut) |
| Vererbung | nein |
| animierbar | nein |
body {
background-image: url(...);
background-position: right;
}
Weblinks
- Spezifikation (W3C): background-position
