CSS background-position-Eigenschaft
Die CSS background-position-Eigenschaft gibt die Startposition eines Hintergrundbilds an.
Standardmäßig wird das Hintergrundbild in der oberen linken Ecke eines Elements platziert. Wenn das Hintergrundbild wiederholt werden soll, geschieht dies sowohl vertikal als auch horizontal.
| Anfangswert | 0% 0% |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Position kann geändert werden. |
| Version | CSS1 |
| DOM-Syntax | object.style.backgroundPosition = "center"; |
Syntax
Syntax der CSS background-position-Eigenschaft
css
background-position: value;Beispiel für die background-position-Eigenschaft:
Beispiel für die CSS background-position-Eigenschaft mit Standardwert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned at the left-top corner of the element.</p>
</body>
</html>Ergebnis
Beispiel für die background-position-Eigenschaft in Prozent:
Beispiel für die CSS background-position-Eigenschaft bei Verwendung von % (Prozent)
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 15%;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 50% from the left side and 15% from the top side of the element.
</p>
</body>
</html>Beispiel für die background-position-Eigenschaft in Pixeln:
Beispiel für die CSS background-position-Eigenschaft bei Verwendung von px
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: 5px 50px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 5px from the left, and 50px down from the top.
</p>
</body>
</html>Beispiel für die background-position-Eigenschaft mit dem Wert „right 100px“:
Beispiel für die background-position-Eigenschaft mit dem Wert „right 100px“:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 100px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned 100px from the right edge, vertically centered.</p>
</body>
</html>Beispiel für die background-position-Eigenschaft mit dem Wert „center center“:
Beispiel für die background-position-Eigenschaft mit dem Wert „center center“:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("https://de.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned center.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
left, center, right, top, bottom | Legt die Position des Hintergrundbilds fest. Wenn nur ein Wert angegeben wird, wird für den anderen Standardwert center verwendet. | Ausführen » |
x% y% | Der erste Wert legt die horizontale Position fest, der zweite die vertikale. 0% 0% ist die obere linke Ecke. 100% 100% ist die untere rechte Ecke. Wenn nur ein Wert angegeben wird, wird für den anderen Standardwert 50% verwendet. | Ausführen » |
xpos ypos | Der erste Wert legt die horizontale Position fest, der zweite die vertikale. Einheiten können Pixel sein (z. B. 0px 0px). | Ausführen » |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Parameter können in der CSS background-position-Eigenschaft verwendet werden, um die Position des Hintergrundbilds anzugeben?