w3docs logo

CSS-Eigenschaft background-position-y

Die Eigenschaft background-position-y legt die vertikale Position für jeden Hintergrund fest.

Ein oder mehrere Werte können durch Kommas getrennt angegeben werden.

Negative Werte sind gültig.
Diese Eigenschaft ist experimentell.
Anfangswert top
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS4
DOM Syntax object.style.backgroundPositionY = "bottom";

Syntax

background-position-y: top | center | bottom | length | percentage | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html { 
      height: 50%;
      }
      body {
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat; 
      background-position-y: top;   
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-position-y</h2>
  </body>
</html>

Ein anderes Beispiel mit dem Wert bottom:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html { 
      height: 50%;
      }
      body {
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat; 
      background-position-y: bottom;   
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-position-y</h2>
  </body>
</html>

Werte

Wert Eigenschaft
top Bezeichnet die Ausrichtung der Oberkante des Hintergrundbildes mit der Oberkante der Hintergrundpositionsschicht.
center Zeigt die Ausrichtung der Mitte des Hintergrundbildes mit der Mitte der Hintergrundpositionsschicht an.
bottom Zeigt die Ausrichtung der Unterkante des Hintergrundbildes mit der Unterseite der Hintergrundpositionsschicht an.
length Zeigt den Offset des linken horizontalen Randes des angegebenen Hintergrundbildes vom linken horizontalen Rand der Hintergrundpositionsebene an.
percentage Zeigt den Offset der vertikalen Position des Hintergrundbildes zum Container an. 0% richtet den linken Rand des Hintergrundbildes mit dem linken Rand des Containers aus, und 100% richtet den rechten Rand des Hintergrundbildes mit dem rechten Rand des Containers aus, und 50% zentriert das Hintergrundbild horizontal.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
4.0+ 49.0+ 3.1+ 15.0+

Übe dein Wissen

Was bedeutet die CSS-Eigenschaft 'background-position-y'?
Finden Sie das nützlich?