CSS, HTML und Javascript mit {stil}

CSS background-position, background-repeat

background position, background repeat – wie und wo sitzt das Hintergrundbild? Zeigt einen Navigator zur Positionsbestimmung hinter Wasserwellen

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).

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%").

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 {                      v
    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.

CSS background-repeat

Per Voreinstellung werden Hintergrundbild über die gesamte Fläche des Elements wagerecht und senkrecht wiederholt.

Die CSS-Eigenschaft background-repeat legt fest, ob und in welche Richtung das Hintergundbild wiederholt werden soll: horizontal oder vertikal oder über die gesamte Fläche des HTML-Elements.

body { background: url(flowers.png) 0 -40% repeat-x; }

CSS3 background-repeat hat neue Werte: round und space. Das Verhalten entspricht den Eigenschaften space und round für border-image-repeat.

  • round wiederholt und packt so viele Elemente in die Box wie möglich und legt sie dann mittig
  • space