`background-position-x` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

Der Wert dieser Eigenschaft wird durch jede Deklaration der Kurzformeigenschaften background oder background-position überschrieben, die nachfolgend auf das Element angewandt werden.

Probieren Sie es aus

background-position-x: left;

background-position-x: center;

background-position-x: 25%;

background-position-x: 2rem;

background-position-x: right 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%;
}

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;

Werte

Diese Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben:

left: Richtet den linken Rand des Hintergrundbildes mit dem linken Rand der Hintergrundpositionsebene aus.
center: Richtet das Zentrum des Hintergrundbildes mit dem Zentrum der Hintergrundpositionsebene aus.
right: Richtet den rechten Rand des Hintergrundbildes mit dem rechten Rand der Hintergrundpositionsebene aus.
<length>: Der Versatz der linken vertikalen Kante des angegebenen Hintergrundbildes von der linken vertikalen Kante der Hintergrundpositionsebene. (Einige Browser erlauben die Zuweisung des rechten Randes für den Versatz.)
<percentage>: Der Versatz der horizontalen Position des angegebenen Hintergrundbildes relativ zum Container. Ein Wert von 0% bedeutet, dass der linke Rand des Hintergrundbildes mit dem linken Rand des Containers ausgerichtet ist, und ein Wert von 100% bedeutet, dass der rechte Rand des Hintergrundbildes mit dem rechten Rand des Containers ausgerichtet ist, sodass ein Wert von 50% das Hintergrundbild horizontal zentriert.

Formale Definition

Anfangswert	`0%`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Prozentwerte	bezieht sich auf die Breite des Hintergrundpositionsbereichs abzüglich der Höhe des Hintergrundbilds
Berechneter Wert	Eine 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
Animationstyp	a 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 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

Seitenbezogene Werte

Das folgende Beispiel zeigt die Unterstützung für syntaktisch seitenbezogene Versätze, die es dem Entwickler erlauben, den Hintergrund von jedem Rand 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;
}