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>

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>

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>

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.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was kann die CSS-Eigenschaft 'background-position' angeben?
Finden Sie das nützlich?