Eigenschaft background-position
Die Eigenschaft background-position legt
die Position des Hintergrundbildes eines Elements fest.
Die Position kann mit beliebigen
Einheiten
für Größen angegeben werden. Der erste Wert bezeichnet
den Abstand von links, der zweite - den Abstand von oben.
Die Position kann auch mit Schlüsselwörtern festgelegt werden.
In diesem Fall ist die Reihenfolge der Werte nicht
wichtig. Schlüsselwörter für die Vertikale: top,
center, bottom. Schlüsselwörter für die Horizontale:
left, center, right.
Wie man Schlüsselwörter verwendet
Um ein Bild mit einem Schlüsselwort zu positionieren,
muss ein Wert für die Vertikale
und einer für die Horizontale angegeben werden. Wenn man beispielsweise
den Wert top right angibt, wird das Bild
oben rechts positioniert.
Die Reihenfolge der Wörter ist unwichtig: man kann top right schreiben,
oder auch right top. Wenn
das Schlüsselwort center vorkommt - kann es weggelassen werden.
Zum Beispiel ist top center dasselbe wie
einfach top. Und center center
ist dasselbe wie einfach center.
Syntax
Selector {
background-position: zwei Werte, durch Leerzeichen getrennt;
}
Beispiel
Standardmäßig befindet sich das Hintergrundbild in der oberen linken Ecke:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in die obere rechte Ecke platzieren:
<div id="elem"></div>
#elem {
background-position: top right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in die untere rechte Ecke platzieren:
<div id="elem"></div>
#elem {
background-position: bottom right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild rechts und vertikal zentriert platzieren:
<div id="elem"></div>
#elem {
background-position: right center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in der Mitte des Blocks platzieren:
<div id="elem"></div>
#elem {
background-position: center center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in einem Abstand von
20px von links und 40px von oben platzieren:
<div id="elem"></div>
#elem {
background-position: 20px 40px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in einem Abstand von
90% von links und 100% von oben platzieren:
<div id="elem"></div>
#elem {
background-position: 90% 100%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in einem Abstand von
30px von links und unten in der Vertikalen platzieren:
<div id="elem"></div>
#elem {
background-position: 30px bottom;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in einem Abstand von
30px von links und vertikal zentriert platzieren:
<div id="elem"></div>
#elem {
background-position: 30px center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Beispiel
Lassen Sie uns das Hintergrundbild in einem Abstand von
30px von oben und horizontal zentriert platzieren:
<div id="elem"></div>
#elem {
background-position: center 30px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Siehe auch
-
die Eigenschaft
background,
die eine Kurzschreibweise für den Hintergrund darstellt
