CSS, HTML und Javascript mit {stil}

CSS background-position, background-repeat, background-attachment

background-position

background-position, background-repeat und background-attachment regeln die Position und Wiederholung von Hintergrundbildern.

background-attachment hält den Hintergrund fest während die Seite scrollt, background-repeat steuert die Wiederholung vertikal oder horizontal, background-position startet das Hintergrundbild unten rechts oder setzt es vertikal zentriert.

background-position: left top (links oben) ist der anfängliche 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

CSS background-attachment

Ohne weitere Angaben scrollen Hintergrundbilder, wenn der Benutzer die Seite scrollt. Die CSS-Eigenschaft background-attachment fixiert das Hintergrundbild an einer festen Position im Browserfenster.

body { background: url(flowers.png) fixed; }
scroll (Voreinstellung)
lässt das Hintergrundbild zusammen mit Text und Bildern scrollen.
fixed
hält das Hintergrundbild fest.