W3docs
de
Anmelden

CSS background-position-y-Eigenschaft

The background-position-y CSS property specifies the vertical position of a background-image. See examples and try them yourself.

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

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

info

Negative Werte sind gültig.

Anfangswerttop
Anwendbar aufAlle Elemente.
VererbtNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.backgroundPositionY = "bottom";

Syntax

CSS background-position-y-Werte

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

Beispiel für die background-position-y-Eigenschaft mit dem Wert „top“:

CSS background-position-y-Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      body {
        padding-top: 30px;
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: top;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS background-position-y top

Beispiel für die background-position-y-Eigenschaft mit dem Wert „bottom“:

CSS background-position-y-Beispiel mit „bottom“

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      body {
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>
Probier es selbst »

Beispiel für die background-position-y-Eigenschaft mit dem Wert „center“:

Beispiel für die background-position-y-Eigenschaft mit dem Wert „center“:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      body {
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>
Probier es selbst »

Beispiel für die background-position-y-Eigenschaft mit dem Wert „length“:

Beispiel für die background-position-y-Eigenschaft mit dem Wert „length“:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      body {
        padding-top: 30px;
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: 90px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>
Probier es selbst »

Beispiel für die background-position-y-Eigenschaft mit dem Wert „percentage“:

Beispiel für die background-position-y-Eigenschaft mit dem Wert „percentage“:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        min-height: 100vh;
      }
      body {
        padding-top: 30px;
        background: url("/build/images/w3docs-logo-black.png") no-repeat;
        background-position-y: 70%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-y property example</h2>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
topLegt die Ausrichtung der oberen Kante des Hintergrundbilds mit der oberen Kante der Hintergrundpositionsebene fest.
centerLegt die Ausrichtung der Mitte des Hintergrundbilds mit der Mitte der Hintergrundpositionsebene fest.
bottomLegt die Ausrichtung der unteren Kante des Hintergrundbilds mit der unteren Kante der Hintergrundpositionsebene fest.
lengthLegt den vertikalen Versatz des Hintergrundbilds von der oberen Kante der Hintergrundpositionsebene fest.
percentageLegt den vertikalen Versatz des Hintergrundbilds relativ zum Container fest. 0 % richtet die obere Kante des Hintergrundbilds an der oberen Kante des Containers aus, 100 % richtet die untere Kante an der unteren Kante des Containers aus und 50 % zentriert das Hintergrundbild vertikal.
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft von ihrem übergeordneten Element.

Practice

Übung

Was ist die Funktion der 'background-position-y'-Eigenschaft in CSS?