CSS-Eigenschaft background-position

Die CSS-Eigenschaft background-position gibt an, wo die Ausgangsposition von background-image sein soll.

Wenn der Standardwert gesetzt ist, wird background-position an der linken oberen Ecke eines Elements platziert. Und wenn Sie den zu wiederholenden Hintergrund einstellen, wird er sowohl vertikal als auch horizontal wiederholt.

Anfangswert	0% 0%
Gilt für	Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt	Nein
Animierbar	Ja. Die Position kann geändert werden.
Version	CSS1
DOM Syntax	object.style.backgroundPosition = "center";

Syntax

background-position: value;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body { 
      padding: 102px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: left top; 
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für background-position</h2>
    <p>Das Hintergrundbild befindet sich in der linken oberen Ecke des Elements.</p>
  </body>
</html>

Versuch es selber!

In diesem Beispiel sehen Sie, wie man background-position mit %s einstellt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body { 
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 15%; 
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für background-position</h2>
    <p>Das Hintergrundbild wird zu 50% von der linken Seite und zu 15% von der Oberseite des Elements positioniert.</p>
  </body>
</html>

Versuch es selber!

In diesem Beispiel sehen Sie, wie man background-position mit Pixeln einstellt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body { 
      padding: 100px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 5px 50px; 
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für background-position</h2>
    <p>Das Hintergrundbild ist 5px von links und 50px von oben positioniert.</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
left right top top bottom center	Setzt die Position von background-image. Wenn wir nur einen Wert einstellen, ist der andere Wert "center".
x% y%	Der erste Wert legt die horizontale Position fest, während der zweite Wert die vertikale Position festlegt. 0% 0% ist die linke obere Ecke. 100% 100% die rechte untere Ecke. Wenn Sie nur einen Wert einstellen, beträgt der andere Wert 50%. 0% 0% ist der Standardwert.
xpos, ypos	Der erste Wert legt die horizontale Position fest, während der zweite Wert die vertikale Position festlegt. Einheiten können Pixel sein (0px 0px).
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erzeugt die Eigenschaft von ihrem übergeordneten Element.


1.0+	1.0+	1.0+	3.5+

1.0+

3.5+

CSS-Eigenschaft background-position

Syntax

Beispiel

Beispiel

Beispiel

Werte

Browser-Support

Übe dein Wissen