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.

* Some parts of this feature may have varying levels of support.

Die background-position-y CSS-Eigenschaft setzt die anfängliche vertikale Position für jedes Hintergrundbild. Die Position ist relativ zur Positionsschicht, die durch background-origin festgelegt wird.

Probieren Sie es aus

background-position-y: top;

background-position-y: center;

background-position-y: 25%;

background-position-y: 2rem;

background-position-y: bottom 32px;

<section class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-color: navajowhite;
  background-image: url("/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  height: 100%;
}

Der Wert dieser Eigenschaft wird durch jede Deklaration der Kurzschreibweiseigenschaften background oder background-position, die dem Element später zugewendet werden, ü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 Eigenschaft background-position-y wird als ein oder mehrere Werte angegeben, die durch Kommata getrennt sind.

Werte

top

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

center

Richtet das vertikale Zentrum des Hintergrundbildes am vertikalen Zentrum der Hintergrundpositionsebene aus.

bottom

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

<length>

Der Versatz der horizontalen Kante des angegebenen 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 Behälter. Ein Wert von 0% bedeutet, dass die obere Kante des Hintergrundbildes mit der oberen Kante des Behälters ausgerichtet ist, und ein Wert von 100% bedeutet, dass die untere Kante des Hintergrundbildes mit der unteren Kante des Behälters ausgerichtet ist, sodass ein Wert von 50% das Hintergrundbild vertikal zentriert.

Formale Definition

Anfangswert0%
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 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;
}

Resultat

Seitenspezifische Werte

Das folgende Beispiel zeigt die Unterstützung der seitenspezifischen 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;
}

Resultat

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch