CSS-background-position-y-Eigenschaft

Definition und Verwendung

background-position-y Das Attribut wird verwendet, um die Position des Hintergrundbilds in der y-Achse zu setzen.

Tipp:Standardmäßig wird das Hintergrundbild in der linken oberen Ecke des Elements positioniert und in der vertikalen und horizontalen Richtung wiederholt.

Beispiel

Beispiel 1

Wie kann das Hintergrundbild in der y-Achse positioniert werden?

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Versuchen Sie es selbst

Beispiel 2

Wie kann die Hintergrundbildposition auf dem oberen Rand erfolgen?

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Versuchen Sie es selbst

Beispiel 3

Wie man das Hintergrundbild an der y-Achse mit Prozenten positioniert:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Versuchen Sie es selbst

Beispiel 4

Wie man das Hintergrundbild an der y-Achse mit Pixeln positioniert:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

Versuchen Sie es selbst

CSS Syntax

background-position-y: value;

Eigenschaftswert

Wert Beschreibung
top Legt die Hintergrundposition auf den oberen Teil der y-Achse.
bottom Legt die Hintergrundposition auf den unteren Teil der y-Achse.
center Legt die Hintergrundposition auf die Mitte der y-Achse.
y%

Die obere Achse des y ist 0%, die untere Achse 100%.

Prozentwerte beziehen sich auf die Höhe des Hintergrundpositionierungsbereichs minus die Höhe des Hintergrundbilds.
ypos

der vertikale Abstand vom oberen Ende.

Einheiten können Pixel (wie 0px) oder andere sein CSS-Einheiten.
ypos offset

doppelter Wertssyntax, nur in Firefox und Safari unterstützt.

  • ypos auf top oder bottom setzen.
  • offset Ist der vertikale Abstand zwischen dem Hintergrundbild und der ypos festgelegt.

Einheiten können Pixel oder andere sein CSS-Einheiten.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem übergeordneten Element erben. Siehe inherit.

Technische Details

Standardwert: 0%
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript Syntax: object.style.backgroundPositionY="center"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
einfacher Wertssyntax 1.0 12.0 49.0 1.0 15.0
doppelter Wertssyntax nicht unterstützt nicht unterstützt 49.0 15.4 nicht unterstützt

zusammenhängende Seiten

Anleitung:CSS Hintergrund

CSS Referenz:background-image Eigenschaft

CSS Referenz:background-position Eigenschaft

CSS Referenz:background-position-x Eigenschaft

HTML DOM Referenz:backgroundPosition Eigenschaft