Stundenplan

CSS-Referenzhandbuch

CSS-Eigenschaft

Wahlpflichtkurse

Kursempfehlung:

CodeW3C.com Taschengeld

CSS-background-position-x-Eigenschaft

vorherige Seite background-position
Nächste Seite background-position-y

Definition und Verwendung

background-position-x Die Eigenschaft legt die Position des Hintergrundbildes auf der x-Achse fest.

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

Beispiel

Beispiel 1

Wie man das Hintergrundbild in der x-Achse positioniert:

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

Versuchen Sie es selbst

Beispiel 2

Wie man das Hintergrundbild auf die rechte Seite positioniert:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Versuchen Sie es selbst

Beispiel 3

Wie man die Positionierung eines Hintergrundbildes in Prozent verwendet:

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

Versuchen Sie es selbst

Beispiel 4

Wie man die Positionierung eines Hintergrundbildes in Pixeln verwendet:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Versuchen Sie es selbst

Beispiel 5

Erstellen Sie eine über den Behälter liegende Hintergrundbild mit verschiedenen Hintergrundeigenschaften:

.hero-image {
  background-image: url("photographer.jpg"); /* verwendtes Bild */
  background-color: #cccccc; /* Wenn das Bild nicht verfügbar ist, wird diese Farbe verwendet */
  height: 300px; /* Höhe muss festgelegt werden */
  background-position-x: center; /* Bild zentrieren */
  background-repeat: no-repeat; /* Bild nicht wiederholen */
  background-size: cover; /* Passen Sie die Größe des Hintergrundbildes an, um den gesamten Container zu überdecken */
}

Versuchen Sie es selbst

CSS Syntax

background-position-x: value;

Eigenschaftswert

Wert	Beschreibung
left	Setzt die Hintergrundposition am linken Ende der x-Achse.
right	Setzt die Hintergrundposition am rechten Ende der x-Achse.
center	Setzt die Hintergrundposition am Zentrum der x-Achse.
x%	Die linke Seite des x-Achsen ist 0%, die rechte Seite ist 100%. Prozentwerte beziehen sich auf die Breite der Hintergrundpositionsbereich minus die Breite des Hintergrundbildes.
xpos	Horizontale Entfernung von der linken Seite. Einheiten können Pixel (z.B. 0px) oder andere sein CSS-Einheiten.
xpos Verschiebung	Doppelt-Wert-Syntax, nur in Firefox und Safari unterstützt. xpos Setzen Sie auf left oder right Verschiebung Ist der horizontale Abstand von der linken oder rechten Seite der Hintergrundbildposition Einheiten können Pixel oder andere sein CSS-Einheiten.
initial	Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe: initial.
inherit	Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert:	0%
Vererbbarkeit:	Nein
Animationsproduktion:	Unterstützt. Siehe:Animationsbezogene Eigenschaften.
Version:	CSS3
JavaScript Syntax:	object.style.backgroundPositionX="center"