background-position-y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die background-position-y CSS Eigenschaft legt die anfängliche vertikale Position für jedes Hintergrundbild fest. Die Position bezieht sich auf die Positionsebene, die durch background-origin festgelegt wird.

Probieren Sie es aus

Der Wert dieser Eigenschaft wird durch jede Deklaration der background oder background-position Kurzschreibweise, die dem Element danach zugewiesen wird, überschrieben.

Syntax

css
/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> values */
background-position-y: 25%;

/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* Side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;

Die background-position-y Eigenschaft wird als ein oder mehrere Werte angegeben, die durch Kommas getrennt sind.

Werte

top

Richtet die obere Kante des Hintergrundbildes mit der oberen Kante der Hintergrundpositionsebene aus.

center

Richtet die vertikale Mitte des Hintergrundbildes mit der vertikalen Mitte der Hintergrundpositionsebene aus.

bottom

Richtet die untere Kante des Hintergrundbildes mit der unteren Kante der Hintergrundpositionsebene aus.

<length>

Der Versatz der angegebenen horizontalen Kante des Hintergrundbildes von der entsprechenden oberen horizontalen Kante der Hintergrundpositionsebene. (Einige Browser erlauben die Zuweisung der unteren Kante für den Versatz).

<percentage>

Der Versatz der vertikalen Position des angegebenen Hintergrundbildes relativ zum Container. Ein Wert von 0% bedeutet, dass die obere Kante des Hintergrundbildes mit der oberen Kante des Containers ausgerichtet ist, und ein Wert von 100% bedeutet, dass die untere Kante des Hintergrundbildes mit der unteren Kante des Containers ausgerichtet ist, so dass ein Wert von 50% das Hintergrundbild vertikal zentriert.

Formale Definition

Initialer Wert0%
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Prozentwertebezieht sich auf die Höhe des Hintergrundpositionsbereichs abzüglich der Höhe des Hintergrundbilds
Berechneter WertEine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird
Animationstypa repeatable list

Formale Syntax

background-position-y = 
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Implementierung eines Hintergrundbildes, bei der background-position-x und background-position-y verwendet werden, um die horizontalen und vertikalen Positionen des Bildes separat zu definieren.

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

Ergebnis

Seitrelationale Werte

Das folgende Beispiel zeigt die Unterstützung der seitrelationale Versatzsyntax, die es dem Entwickler ermöglicht, den Hintergrund von jeder Kante aus zu versetzen.

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 4
# background-position-longhands

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch