CSS background-position

CSS background-position – wo beginnt das Hintergrundbild

background-position regelt die Position und Ausrichtung des Hintergrundbilds – z.B. von oben links oder aus der Mitte heraus. background-repeat bestimmt die Art der Wiederholung von Hintergrundbildern (keine Wiederholung, nur horizontal oder nur vertikal wiederholen).

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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
}
background-position: left top






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, kann es sich lohnen, mehrere Bilder oder Grafiken in eine Datei zu setzen, 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.

Image Sprite mit CSS Background
Natürlich wird im Image Sprite keine überflüssige Luft um die Bilder herum lassen. Wir feilen und sparen an jedem Pixel.
.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 ist groß, aber ihr Einsatz bringt nicht unbedingt einen handfesten Vorteil. Sprites sind OK, wenn die Seiten mit HTTP/1.1 bedient werden. 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.

Alternativ: Responsive Image Sprites