Freigeben über

background-position

  • Artikel

Legt die Position des Hintergrunds eines Objekts fest oder ruft diese ab.

Syntax

{ background-position: sPosition }

Mögliche Werte

sPosition

Zeichenfolge, mit der einer oder zwei der folgenden Werte angegeben oder empfangen werden:

length

Gleitkommazahl, gefolgt von einem absoluten Einheitenkennzeichner (cm, mm, in, pt oder pc) oder einem relativen Einheitenkennzeichner (em, ex oder px).

percentage

Ganze Zahl, gefolgt von einem Prozentzeichen (%). Dieser Prozentsatz ist relativ zur Breite oder Höhe des Objekts:

  • Wert für vertikale Ausrichtung. Beispiele für mögliche Werte:

    • top   Vertikale Ausrichtung oben.

    • center   Vertikale Ausrichtung zentriert.

    • bottom   Vertikale Ausrichtung unten.

  • Wert für horizontale Ausrichtung. Beispiele für mögliche Werte:

    • left   Horizontale Ausrichtung links.

    • center   Horizontale Ausrichtung zentriert.

    • right   Horizontale Ausrichtung rechts.

Diese Eigenschaft hat den Standardwert 0 % 0 %. Sie wird nicht vererbt.

Hinweise

Wenn nur ein Wert festgelegt wird, gilt dieser Wert für die horizontale Koordinate, und die vertikale Koordinate wird auf 50 % festgelegt. Wenn beide Werte festgelegt werden, gilt der erste Wert für die horizontale Koordinate und der zweite Wert für die vertikale Koordinate.

Das Festlegen der Werte auf 0 % 0 % bewirkt, dass background-image an der linken oberen Ecke des Elementinhalts positioniert wird, wobei der Innenabstand ausgenommen ist.

Wenn Sie right center angeben, wirkt sich dies wie folgt aus: Da right als X-Koordinatenrichtung angesehen wird, überschreibt right den Wert von center, und der Hintergrund wird entsprechend nach rechts verschoben.

Sie können diese Eigenschaft mit den anderen Hintergrundeigenschaften festlegen, indem Sie die übergreifende background-Eigenschaft verwenden.

Beispiele

Im folgenden Beispiel wird die background-position-Eigenschaft verwendet, um die Position eines Hintergrundbilds anzugeben. Es wird ein Aufruf an ein eingebettetes (globales) Stylesheet verwendet, um die Kugel zu verschieben:

<style>
    .style1 {background-position:top center}
    .style2 {background-position:bottom right}
</style>
</head><body onload="ospan.className='style1'">
<span style="font-size:14; width:250;" id="ospan"
      onmouseover="this.className='style2'"
      onmouseout="this.className='style1'">
. . . 
</span> 

Informationen zu Standards

Diese Eigenschaft ist unter Cascading Style Sheets (CSS), Level 1 (CSS1) (möglicherweise in englischer Sprache) definiert.

Gilt für

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, FIELDSET, FORM, HN, HTML, I, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OL, P, S, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Siehe auch

Konzepte

background