Diebackground-position-xCSS Eigenschaft setzt die anfängliche horizontale Position für jedes Hintergrundbild. Die Position ist relativ zur Positionsebene, die durchbackground-origin festgelegt wird.

Der Wert dieser Eigenschaft wird durch jede Deklaration der abkürzenden Eigenschaftenbackground oderbackground-position, die nachträglich auf das Element angewendet werden, überschrieben.

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>  <div></div></section>

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

Syntax

/* 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 Eigenschaftbackground-position-x wird als ein oder mehrere Werte angegeben, die durch Kommata getrennt sind.

Werte

left

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

center

Richtet das Zentrum des Hintergrundbildes am Zentrum der Hintergrundpositionsebene aus.

right

Richtet den rechten Rand des Hintergrundbildes am 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 der rechten Kante 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 derrechte Rand des Hintergrundbildes mit demrechten Rand des Containers ausgerichtet ist, sodass ein Wert von 50% das Hintergrundbild horizontal zentriert.

Formale Definition

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, bei derbackground-position-x undbackground-position-y verwendet werden, um die horizontalen und vertikalen Positionen des Bildes separat zu definieren.

HTML

<div></div>

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

Seitenrelative Werte

Das folgende Beispiel zeigt die Unterstützung der seitenrelativen Versatzsyntax, die es dem Entwickler erlaubt, den Hintergrund von jedem Rand aus zu versetzen.

HTML

<div></div>

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

Browser-Kompatibilität

Siehe auch

• background-position
• background-position-y
• Verwendung mehrerer Hintergründe