CSS/Eigenschaften/Hintergrundfarben und -bilder/background-position

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können mithilfe der Eigenschaft background-position bestimmen, an welcher Stelle sich die linken oberen Ecken der Hintergrundbilder befinden sollen. Dies wird beispielsweise angewendet, um durch Spritegrafiken die Ladezeit einer Internetseite zu verringern. Beachten Sie, dass multiple Hintergrundgrafiken nicht von allen Versionen der Browser unterstützt werden.

  • CSS 2.1
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 3.0
  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background-position</title>
    <style>
      ... 
      #eins { background-position: center; }
      #zwei { background-position: -50px 100px; }
      #drei { background-position: right bottom; }
      #vier { background-position: left -50px bottom 100px; }
    </style>
  </head>
  <body>
    <h1>background-position</h1>
    <div id="eins"><span class="caption">center center</span></div>
    <div id="zwei"><span class="caption">-50px 100px</span></div>
    <div id="drei"><span class="caption">right bottom</span></div>
    <div id="vier"><span class="caption">left -50px bottom 100px</span></div>
  </body>
</html>

Mit background-position positionieren Sie das Hintergrundbild innerhalb des Anzeigebereiches (siehe auch background-clip).

Erlaubt ist dabei ein Paar von Längenangaben. Die erste Längenangabe bezeichnet dabei die Position in x-Richtung, die zweite die in y-Richtung. Auch negative Werte sind möglich. Wird nur eine Längenangabe gemacht, so ist dies die horizontale Position, der fehlende Wert wird mit center initialisiert. Der Ausgangswert ist 0 0. Er positioniert die linke obere Ecke des Hintergrundbildes an die linke obere Ecke des Anzeigebereiches.

Erlaubt ist weiterhin ein Paar selbsterklärender Schlüsselwörter:

  • left, center, right, für die horizontale Positionierung
  • top, center, bottom, für die vertikale Positionierung

Wird von diesen Schlüsselwörtern nur eines gesetzt, so wird die fehlende Angabe mit center initialisiert.

Mit CSS3 ist es möglich, Abstände zu den Rändern, sogenannte Offsets anzugeben. Dazu können für eine background-position-Angabe 2 Werte gesetzt werden. Eine davon muss eines der Schlüsselwörter sein. Positive Werte spezifizieren einen Abstand nach innen, negative nach außen.

Beispiel
#mein_element {background-position: 20px 40px;}
/* Die linke obere Ecke des Hintergrundbildes
   befindet sich 20 Pixel vom linken Rand und 40 Pixel vom oberen Rand. */
#mein_element {background-position: right 20px bottom 40px;}
/* Die rechte untere Ecke des Hintergrundbildes 
   befindet sich 20 Pixel vom rechten Rand und 40 Pixel vom unteren Rand. */

Weiterhin sind Prozentangaben erlaubt. Sie beziehen sich dabei stets auf die Differenz der Abmessungen von Anzeigebereich des Hintergrundbildes und Hintergrundbild selbst. Eine positive Angabe referenziert einen Punkt innerhalb der Anzeigebereiches, eine negative entsprechend außerhalb.

Background-position1.png

Beispiel
#mein_element {background-position: 20% 60%;}
  1. Es wird der Punkt des Anzeigebereiches bestimmt, der 20% von seinem linken und 60% von seinem oberen Rand entfernt ist.
  2. Es wird der Punkt der Hintergrundgrafik bestimmt, der 20% von ihrem linken und 60% von ihrem oberen Rand entfernt ist.
  3. Es wird so gerendert, dass diese beiden Punkte übereinander liegen.
Background-position2.png
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML