Sie befinden sich hier: » CSS Angaben » Hintergrund & Farben » background-position

Hintergrundpositionierung :: background-position

Mit der Angabe "background-position" können Sie festlegen, wo das Hintergrundbild positioniert werden soll.

<p style="background-image: url('img/g3242.png'); background-position: right top">
  Dieser Absatz hat ein Hintergrundbild.<br />
  Das Hintergrundbild wird dabei rechts oben ausgerichtet.<br /><br />
</p>
<br /><br />
<p style="background-image: url('img/g3242.png'); background-position: left bottom">
  Dieser Absatz hat auch ein Hintergrundbild.<br />
  Diesmal ist das Hintergrundbild aber unten links ausgerichtet.<br /><br />
</p>

so sieht es aus, wenn es von Ihrem aktuellen Browser unterstützt wird

Dieser Absatz hat ein Hintergrundbild.
Das Hintergrundbild wird dabei rechts oben ausgerichtet.
 



Dieser Absatz hat auch ein Hintergrundbild.
Diesmal ist das Hintergrundbild aber unten links ausgerichtet.
 

background-position Definition

CSS Version CSS 1
Startwert 0px 0px
Vererbar nein
Anwendbar auf alle Elemente
Medium visual
mögliche Werte
  • top, center, bottom - Schlüsselwörter für vertikale Ausrichtung
  • left, center, right - Schlüsselwörter für horizontale Ausrichtung
  • (negative) Prozentangaben
  • (negative) Längenangaben
  • inherit
Anmerkungen Wird nur ein Wert angegeben, bezeichnet dies automatisch die horizontale Ausrichtung. Für die vertikale Ausrichtung wird dann automatisch 50% angenommen. Werden zwei Werte angegeben, bestimmt der erste Wert die horizontale Ausrichtung, und die zweite Angabe die vertikale Ausrichtung. Alle Arten von Angaben dürfen gemischt werden, z.B. "left 10px", "1em 3%", ... Angaben mit Abstand vom Rand schließen den padding-Bereich mit ein. D.h. ein verändertes padding bei einem Element verschiebt nicht das Hintergrundbild.

Browserunterstützung von background-position

Microsoft Internet Explorer Opera Netscape Mozilla Firefox Safari Konqueror Google Chrome
5+ 5+ 4 6+ 1+ 0.8+ 1+ 3.5+ 2
top, center, bottom J J N J J J J J J
left, center, right J J N J J J J J J
Längen-, Prozentangaben J J N J J J J J J
negative Längen-, Prozentangaben J J N J J J J J J
Kombi:Längenangabe [Längen-|Prozentangabe|Schlüsselwort] J J N J J J J J J
Kombi: Prozentangabe [Längen-|Prozentangabe|Schlüsselwort] J J N J J J J J J
Kombi: Schlüsselwort [Längen-|Prozentangabe] J N N N N N J J J
Kombi: Schlüsselwort Schlüsselwort J J N J J J J J J
letzte Änderung: 06.04.2011