CSS-background-position Eigenschaft

Definition und Verwendung

background-position Eigenschaft zur Festlegung des Startorts des Hintergrundbildes.

Diese Eigenschaft setzt das Originalhintergrundbild (von background-image Ort der Definition）, wenn das Hintergrundbild wiederholt werden soll, beginnt es hier.

Tipp:Man muss die Eigenschaft background-attachment auf "festum sicherzustellen, dass die Eigenschaft in Firefox und Opera ordnungsgemäß funktioniert.

Siehe auch:

CSS-Tutorial:CSS Hintergrund

CSS Referenzhandbuch:background-image-Eigenschaft

HTML DOM Referenzhandbuch:backgroundPosition-Eigenschaft

Beispiel

Wie man das Hintergrundbild positioniert:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Versuchen Sie es selbst

CSS-Syntax

background-position: value;

Attributwert

Wert Beschreibung
  • oben links
  • oben mittig
  • oben rechts
  • mittig links
  • mittig mittig
  • mittig rechts
  • unten links
  • unten mittig
  • unten rechts

Wenn nur ein Schlüsselwort angegeben wird, ist der zweite Wert "center".

Standardwert: 0% 0%.
x% y%

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position.

Die obere linke Ecke ist 0%. Die untere rechte Ecke ist 100% 100%.

Wenn nur ein Wert angegeben wird, ist der andere 50%.
xpos ypos

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position.

Der obere linke Ecke ist 0 0. Die Einheit ist Pixel (0px 0px) oder jede andere CSS-Einheit.

Wenn nur ein Wert angegeben wird, ist der andere 50%.

Man kann % und position-Werte mischen.

Technische Details

Standardwert: 0% 0%
Vererbbarkeit: nein
Version: CSS1
JavaScript-Syntax: object.style.backgroundPosition="center"

Mehr Beispiele

Wie man die Position des Hintergrundbilds mit % festlegt
Dieses Beispiel zeigt, wie man die Position des Hintergrundbilds auf der Seite mit Prozentsätzen festlegt.
Wie man die Position des Hintergrundbilds mit Pixeln festlegt
Dieses Beispiel zeigt, wie man die Position der Hintergrundbild auf der Seite mit Pixeln festlegt.

Browser-Unterstützung

Tabelle: Die angegebenen Zahlen beziehen sich auf die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5