Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: background-position, Kategorien: Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3)

Position der Hintergrundgrafik

Bestimmt die Position der Hintergrundgrafik.

CSS-Eigenschaft: background-position
KurzbeschreibungWerteStandardwertKategorieHinweis
Position der Hintergrundgrafik
  • <percentage>
  • <length>
  • left
  • center
  • right
  • top
  • bottom
  • inherit
0% 0%
Allgemein:
Hintergründe
CSS 2.1:
Colors and Backgrounds
CSS 3:
Backgrounds and Borders
 

Folgendes ist beim Einsatz von background-position zu beachten:

  • background-position erwartet ein oder zwei absolute oder relative Werte oder einen der Schlüsselworte left, center oder right für eine linke, mittige oder rechts Ausrichtung und eines der Schlüsselworte von top, center oder bottom für eine Ausrichtung von oben, unten oder mittig in der vertikalen Dimension.
  • Dabei können Schlüsselworte und Werte gemischt werden, eine Angaben von background-position: center 20px ist also zulässig.
  • Bei zwei Werten bewirkt der erste die Ausrichtung auf horizontaler Dimension, der zweite den Abstand in der vertikalen Dimension.
  • Wird nur ein Wert angegeben, wird dieser nicht für beide Dimensionen verwendet, sondern lediglich als Parameter für die horizontale Ausrichtung. Für die vertikale Ausrichtung wird dann automatisch ein Wert 50% bzw. center gesetzt.
  • Der Einsatz von background-position benötigt immer die Definition einer Hintergrundgrafik, entweder per background oder background-image.
  • Ebenfalls macht background-position nur Sinn, wenn die Wiederholung der Hintergrundgrafik mindestens in einer Dimension unterdrückt ist. Wird die Hintergrundrafik sowohl vertikal als auch horizontal wiederholt, verändert sich bei background-position zwar der Ausgangspunkt der Wiederholung, die Auswirkungen sind aber nur zu erkennen, wie die Hintergrundgrafik an den Rändern der Box abgeschnitten wird. Da in der Praxis zumeist Verläufe oder Muster wiederholt werden, spielt die Auswirkung von background-position dann keine Rolle.
  • Die Unterschiede der Hintergrundgestaltung zwischen CSS 2.1 und CSS 3 sind gewaltig. Verwandte Eigenschaften sind in der Box oben rechts zu finden.
Browserunterstützung von background-position
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu background-position:



Beispiele

HTML:

<div>.</div>

CSS:

div {
   background-image: url('img/ball.png');
   background-repeat: no-repeat;
   height: 150px;
   border: 1px solid black;
   margin: 10px 0px;
}
/* Diese Anweisung wird von jedem weiterem Beispiel übernommen.
Damit das Verhalten deutlich wird, ist das background-repeat auf no-repeat gesetzt.
Per Default wird eine Hintergrundgrafik links oben positioniert. */

Beispiel Nr. 1 So sieht's aus:

.
 

HTML:

<div class="einfach"></div>

CSS:

div.einfach {
   background-position: 250px;
}
/* Ist nur ein Wert angegeben, wird der zweite mit "center" initialisiert. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

 

HTML:

<div class="doppelt"></div>

CSS:

div.doppelt {
   background-position: 10px 80px;
}
/* Beispiel für eine Ausrichtung von links oben in PX-Werten */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

 

HTML:

<div class="prozent"></div>

CSS:

div.prozent {
   background-position: 70% 90%;
}
/* Beispiel für eine prozentuale Anweisung. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

 

HTML:

<div class="mitte"></div>

CSS:

div.mitte {
   background-position: center center;
}
/* Beispiel für eine Zentrierung in beiden Dimensionen. 50% 50% hätte das gleiche Ergebnis. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

 

HTML:

<div class="singlemitte"></div>

CSS:

div.singlemitte {
   background-position: right;
}
/* Auch bei einem Schlüsselwort wird der fehlende Wert durch "center" initialisiert */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

 

HTML:

<div class="linksoben"></div>

CSS:

div.linksoben {
   background-position: left top;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 7 So sieht's aus:

 

HTML:

<div class="linksunten"></div>

CSS:

div.linksunten {
   background-position: left bottom;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 8 So sieht's aus:

 

HTML:

<div class="rechtsoben"></div>

CSS:

div.rechtsoben {
   background-position: right top;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 9 So sieht's aus:

 

HTML:

<div class="rechtsunten"></div>

CSS:

div.rechtsunten {
   background-position: right bottom;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 10 So sieht's aus:

 

HTML:

<div class="linksmitte"></div>

CSS:

div.linksmitte {
   background-position: left center;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 11 So sieht's aus:

 

HTML:

<div class="rechtsmitte"></div>

CSS:

div.rechtsmitte {
   background-position: right center;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 12 So sieht's aus:

 

HTML:

<div class="mitteoben"></div>

CSS:

div.mitteoben {
   background-position: center top;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 13 So sieht's aus:

 

HTML:

<div class="mitteunten"></div>

CSS:

div.mitteunten {
   background-position: center bottom;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 14 So sieht's aus:

 

HTML:

<div class="mix"></div>

CSS:

div.mix {
   background-position: right 30%;
}
/* Schlüsselworte und Werte können gemischt werden. */
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 15 So sieht's aus:

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 7.318 sec.

Browser-Marktanteile