Hintergrundbild einsetzen
background-position: left top (links oben) ist der Ursprung eines Hintergrundbilds und wird als Prozent- oder Längenangabe (z.B. in Pixel) auf der horizontalen und vertikalen Achse oder durch Schlüsselwörter (z.B. »bottom center«, um das Hintergrundbild vertikal zu zentrieren) angegeben.
.patternbox {
background-image: url(pattern.png);
background-repeat: no-repeat;
horizontal
|
background-position: left top;
|
vertikal
}
Jede Kombination aus Prozentangaben und Längen ist möglich. Negative Längenangaben sind erlaubt und Schlüsselwörter dürfen mit Prozentangaben und Längenangaben gemischt werden (z.B. "center -10%").
Syntax und Koordinaten
background-position gibt nicht die Position des Hintergrundbilds innerhalb seines Elements an, sondern verschiebt das Hintergrundbild auf die Position (z.b. bei center) oder um die Längenangabe. Erst background-clip und background-origin verändern die Position von Hintergrundbildern oder der Hintergrundfarbe gegen den Nullpunkt oben links.
Das Koordinatensystem für die Position des Hintergrundbildes ist per Default die »border box« – der Raum des Elements mitsamt padding und border (bei einer semitransparenten oder durchbrochener border gut zu erkennen).
40px von oben und unten ──────┐
│
.patterbox { ▼
background: url(pattern.png) 40px 40px;
} ▲
│
40px von rechts und links ──────┘
.elem { background: url(pattern.png) 40px 40px; }
.patterbox {
background: url(pattern.png) 40px 40px;
}
In gleicher Weise wird background-position verwendet, wenn mehrere Hintergrundbilder für ein Element versetzt werden sollen.
Image Sprites mit background-position
Für kleine Bilder, z.B. für Icons, wurden früher mehrere Bilder oder Grafiken in eine Datei gesetzt, um die Ladezeit der Seite zu verkürzen. Eine Bilddatei mit vier Bildern ist nicht unbedingt vier mal so groß wie vier einzelne Bilderdateien. Zudem erfordert dann nicht mehr jedes einzelne Bild einen HTTP-Request.
Diese Technik wird als Image Sprite bezeichnet.
.bbox {
background-image: url(all-icons.png);
width: 100px; height: 100px;
float:left; margin-right:10px;
}
<div class="bbox" style="background-position:-50px -50px"></div> <div class="bbox" style="background-position:-150px -50px"></div> <div class="bbox" style="background-position:-250px -50px"></div> <div class="bbox" style="background-position:-350px -50px"></div>
background-position verschiebt den Hintergrund für jede Box so, dass jeweils ein Icon in der Box erscheint.
Der Vorlauf für die Erstellung und den Einsatz von Image Sprites war groß, aber ihr Einsatz brachte kaum einen handfesten Vorteil. HTTP/2, die neuere Version des HTTP-Protokolls, kann bereits mehrere Datentransfers über eine Verbindung durchführen, so dass HTTP-Requests hier sozusagen billiger sind. Da macht es eher Sinn, SVG-Icons, die auf mehreren Seiten vorkommen, als Icon-Font aus einer einzigen Datei zu holen, die u.U. schon im Cache des Browsers liegt.
