CSS, HTML und Javascript mit {stil}

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

CSS background position repeat attachement

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

background-attachment kann ein Hintergrund festhalten während die Seite gescrollt wird.

background-position 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 right«) angegeben. Die Position kann absolut oder relativ in Hinsicht auf den Container des Hintergrundbilds festgelegt werden.

.elem { background: url(pattern.png) center top; }
.elem { background: url(pattern.png) right bottom; }

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

Jede Kombination aus Prozentangaben und Längen ist möglich. Alternativ kann ein Schlüsselwort [top, center, bottom] und/oder [left, right, center] als Position notiert werden. 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 Nullpunkt oben links.

   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.