background-position-x

Die background-position-x CSS Eigenschaft bestimmt die anfängliche horizontale Position für jedes Hintergrundbild. Die Position ist relativ zur Positionsebene, die durch background-origin gesetzt wird.

Probieren Sie es aus

Der Wert dieser Eigenschaft wird von jeder Deklaration der Kurzform-Eigenschaften background oder background-position außer Kraft gesetzt, wenn sie anschließend auf das Element angewendet werden.

Syntax

css
/* Keyword values */
background-position-x: left;
background-position-x: center;
background-position-x: right;

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

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

/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;

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

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

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

Werte

left

Richtet den linken Rand des Hintergrundbildes am linken Rand der Hintergrundpositionsebene aus.

center

Richtet die Mitte des Hintergrundbildes an der Mitte der Hintergrundpositionsebene aus.

Richtet den rechten Rand des Hintergrundbildes am rechten Rand der Hintergrundpositionsebene aus.

<length>

Der Versatz der linken vertikalen Kante des gegebenen Hintergrundbildes von der linken vertikalen Kante der Hintergrundpositionsebene. (Einige Browser erlauben die Zuweisung der rechten Kante zum Versatz).

<percentage>

Der Versatz der horizontalen Position des gegebenen Hintergrundbildes relativ zum Container. Ein Wert von 0% bedeutet, dass der linke Rand des Hintergrundbildes mit dem linken Rand des Containers übereinstimmt, und ein Wert von 100% bedeutet, dass der rechte Rand des Hintergrundbildes mit dem rechten Rand des Containers übereinstimmt, daher zentriert ein Wert von 50% das Hintergrundbild horizontal.

Formale Definition

Anfangswert0%
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Prozentwertebezieht sich auf die Breite 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-x = 
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#  

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

Beispiele

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Implementierung eines Hintergrundbildes, wobei background-position-x und background-position-y verwendet werden, um die horizontale und vertikale Position 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

Kanten-relative Werte

Das folgende Beispiel zeigt die Unterstützung der syntax-seitigen Versatzsyntax, die es dem Entwickler ermöglicht, den Hintergrund von jeder Kante 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