Hintergrundbilder
Ein Hintergrundbild kann in jedes Element gelegt werden, das eine Ausdehnung hat, nicht nur in den ganzen Body der Seite, auch in Paragrafen, in div- und span-Container, in Titel, in Tabellen und einzelne Tabellenzellen und in Bilder. Die Grösse des Elements wird nicht duch das Hintergrundbild beeinträchtigt.
Bild url
background-image:
Hintergrundbilder in Text-Elementen sollten diskret sein.
Das Hintergrundbild ist durch eine url anzugeben:
bg1 {background-image: url('images/bg_pattern_1.jpg');}
Normalerweise repetiert sich ein zu kleines Hintergrundbild in der Breite (x-Achse) und in der Höhe (y-Achse) so oft, bis es den ganzen Hintergrund ausfüllt automatisch (es wird gekachelt).
Ein zu grosses Hintergrundbild wird (ebenso automatisch) rechts-unten beschnitten.
Als Hintergrundfläche gilt die Grössenangabe eines Elements (oder der Platzanspruch seines Inhalts) zusammen mit dem Padding nach allen Seiten. Ein Hintergrundbild bestimmt nie die Dimension des Elements in dem es liegt!
Eigenschaften
Kacheln
background: und background-repeat:
Das Hintergrundbild ist nur ein Teil der Hintergrund-Eigenschaft 'background'. Damit lassen sich auch die Repetition, die Position und die Hintergrundfarbe einstellen. Die Reihenfolge der Angaben ist egal.
bg1 {background: #e9e9e9 url('images/bg_pattern_1.jpg') no-repeat;}
Falls ein Hintergrundbild einmal fehlt, ist die vorsorgliche Angabe einer Hintergrundfarbe nützlich.
Durch die Eigenschaft no-repeat wird das Kacheln unterbunden,
die dahinter liegende Hintergrundfarbe wird sichtbar; das Hintergrundbild steht
oben links, falls Angaben zur Position fehlen.
Das Kacheln lässt sich auch auf eine Achse beschränken:
background-repeat: repeat-x; (horizontal) oder
background-repeat: repeat-y; (vertikal)
Es gibt Online-Tools zum einfachen Erstellen von Tiles (Kacheln), welche schön aneinander passen:
Z.B.: bgpatterns.com/
Positionieren
background-position:
Die Position eines kleineren Hintergrundbildes lässt sich durch Achsen-Angaben von der linken, oberen Ecke her bestimmen (zuerst horizontal, dann vertikal):
bg3 {background: #d7d7d7 url('images/bg_pattern_1.jpg') no-repeat;
background-position: 300px 150px; }
Es gelten aber auch %-Angaben oder Schlüsselworte:
background-position: 50% 50%; oder
background-position: left, right, center, und top, bottom, center
Scrollen im Body
background-attachment:
Das Hintergrundbild bewegt sich normalerweise beim Scrollen mit, als wäre der Text darauf geschrieben:
Seite mit Hintergrundbild
Das Hintergrundbild lässt sich aber auch vom Text lösen, und in seiner Position zum Seitenrand fixieren,
als wäre der Text welcher scrollt auf einer transparenten Folie:
Seite mit attached Hintergrundbild
Scrollen in Boxes / Containern
Die beiden folgenden scrollbaren Container zeigen beim Scrollen in den Containern das gleiche Verhalten, der Text hat sich vom Hintergrund gelöst, so als wäre der Hintergrund 'fixed'. Wird jedoch die Seite gescrollt, dann wirkt der zweite Container wie ein Loch in der Seite, durch das hindurch der Seitenbackground fixiert zu sehen ist.
Das Hintergrundbild im Body bewegt sich normalerweise beim Scrollen mit, als wäre der Text darauf geschrieben. Bei Hintergrundbildern in scrollbaren Elementen wie p-Absätzen, div-Containern und in Tabellenzellen, lösen die Browser aber den Text vom Hintergrund:
Beispiel ohne background-attachment:
bg4 {
height: 150px; overflow:auto;
background-color: Wheat;
background-image: url('images/bg_pattern_2.jpg');
}
Das Hintergrundbild im Body bewegt sich normalerweise beim Scrollen mit, als wäre der Text darauf geschrieben. Bei Hintergrundbildern in scrollbaren Elementen wie p-Absätzen, div-Containern und in Tabellenzellen, lösen die Browser aber den Text vom Hintergrund:
Beispiel mit background-attachment:fixed
bg5 {
height: 150px; overflow:auto;
background-color: Wheat;
background-image: url('images/bg_pattern_2.jpg');
background-attachment:fixed;
}
Neu in CSS 3
Grösse anpassen
background-size:
Seit CSS3 kann die Grösse des Hindergrundbildes verändert werden. In allen aktuellen Browsern geht dies ohne ihr proprietäres Prefix. Die Grössenangabe des Hintergrundbildes erfolgt in % zur Elementausdehnung (Breite Höhe), in px Werten (Breite Höhe) oder mit den Schlüsselworten 'contain' oder 'cover'.
Das Hintergrundbild wird auf 50% des Containers gesetzt. Diese Angaben richten sich nach der zu füllenden Fläche und verändern das Bild unproportional.
bg51 {
background: #e9e9e9 url('images/bg_pattern_1.jpg') no-repeat;
background-size: 50% 50%;
}
Das Hintergrundbild wird auf 100px Breite und 50px Höhe festgelegt und repetiert.
bg52 {
background: #e9e9e9 url('images/bg_pattern_1.jpg');
background-size:100px 50px;
}
Das Hintergrundbild wird durch 'contain' soweit proportional vergrössert, bis es eine Dimension der Fläche füllt, also bis es von links oben kommend an den unteren oder rechten Rand stösst. Bei ungleichen Proportionen von Bild und Fläche bleibt so ein Teil ohne Hintergrund.
bg53 {
background: #e9e9e9 url('images/bg_pattern_1.jpg') no-repeat;
background-size:contain;
}
Das Hintergrundbild wird durch 'cover' soweit proportional vergrössert, bis es die ganze Fläche füllt. Bei ungleichen Proportionen von Bild und Fläche wird so ein Teil vom Hintergrund abgeschnitten. Es versteht sich, dass hier eine Repetition nicht angebracht ist.
bg54 {
background: #e9e9e9 url('images/bg_pattern_1.jpg') no-repeat;
background-size:cover;
}
Vor CSS 3 gibt es, um die Grösse des Hintergrundbildes anzupassen, folgenden Workaround:
In dem ein normales Bild in einem Container als Seitenhintergrund positioniert wird,
wird beim Verändern der Browsergrösse das Bild den Verhältnissen angepasst.
Bild im Hintergrund in der Grösse anpassen.
Mehrere Hintergrundbilder
Mehrere Hintergrundbilder und deren Eigenschaften werden als Komma separierte Listen angegeben.
bg55 {
background-color: #e9e9e9;
background-image:
url('images/bg_pattern_2.jpg'),
url('images/bg_pattern_2.jpg'),
url('images/bg_pattern_2.jpg'),
url('images/bg_pattern_2.jpg');
background-size: 80px, 80px, 80px, 80px;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;
}
Inline Vignetten
Bitte beachten Sie: ...
Hintergrundbilder lassen sich auch in Inline-Elemente einfügen wie in span-Tags, a-Tags (siehe Links) oder li-Tags (siehe Listen).
Das Padding vergrössert den an sich dimensionslosen span auf die Grösse des Hintergrundbildes, das span darf aber nicht ganz leer sein, es empfiehlt sich ein geschütztes Leerzeichen:
.bg6 { padding: 11px 14px; background: url('images/info.jpg') no-repeat; }
<span class="bg6"> </span>Bitte beachten Sie: ...
Effekte durch Stapeln
Bilder im Hintergrund sind oft workarounds um trickreiche Effekte zu erzielen. Durch Stapeln von mehreren Elementen können vielschichtige Konstrukte erzeugt werden, deren transparenten Stellen die gezielt platzierten und begrenzten Hintergründe zeigen.
Hintergrundfarbe
Das Oberste PNG-Bild, mit den weissen Elementen auf transparentem Grund gehört einer Klasse an, welche ein Hintergrundbild (mit grünen Elementen und ebenfalls viel Transparenz) und zusätzlich eine Hintergrundfarbe definiert. Die Hintergrundfarbe liegt immer hinter dem Hintergrundbild.
.bg7 { background: #cccc99 url('images/muster_gruen.png'); }
Transparenz
Transparenz lässt sich inzwischen mit CSS 3 erzeugen.
Zwei ineinander verschachtelte div mit Hintergrundbildern erzeugen einen ausgrauenden Effekt.
In den ersten Container wird ein Hintergrundbild (Motiv) gelegt.
Der zweite Container mit einem Hintergrundbild (Raster welcher sich kachelt, oder ein 40% Grau PNG) kommt in den ersten;
das Hintergrundbild im zweiten kommt so automatisch über das des ersten zu liegen.
Zur Verdeutlichung ist das Motivbild kleiner als sein Container und oben links angeordnet,
der zweite Container ist etwas kleiner als der erste und unten rechts angeordnet
(das Hintergrundbild lässt sich nicht durch css skallieren, schon gar nicht ein gekacheltes).
Die Container müssen leer sein; wären richtige Bilder in den Containern,
könnten diese nicht übereinander liegen.
CSS:
.bg8 { float:left; margin-right:20px; width:170px; height: 190px;
background: url('images/lichtenstein.png') no-repeat top left; }
.bg9 { position:relative; top:10px; left:20px; width:150px; height: 170px;
background: url('images/raster5050.png'); }
HTML:
<div class="bg8"><div class="bg9"></div></div>
Runde Ecken, Rahmen und Schatten
Diese fancy Effekte lassen sich inzwischen viel besser mit CSS 3 Fancy erzeugen.
Folgende Technik eignet sich, falls ich viele Bilder mit gleichem Format habe (z.B. Thumbnails).
Runde Ecken oder Bilderrahmen: Es könnte ein Rahmen als Bild genommen werden
(für die runden Ecken einer in der Farbe des Hintergrundes),
durch dessen transparenten Innenbereich das Hintergrundbild mit dem Motiv zur Geltung kommt.
Schatten: Es kann rechts und unterhalb des Bildes mit dem Motiv ein padding gemacht werden,
durch den das Hintergrundbild mit dem Schatten durch scheint.
,
,
.bg11 { background: url('images/waterlilies.jpg') no-repeat; background-position: 5px 5px;}
.bg10 { background: url('images/waterlilies_shadow_grau.jpg') no-repeat right bottom; padding-right:10px; padding-bottom:10px }
Tabellen Lösungen
Für Bild-Schatten: Durch Tabellen welche rechts und unten eine
Kollonne bzw. Zeile für den Schatten und die Schattenecken angefügt haben,
können auch Bilder unterschiedlicher Grösse mit Schatten versehen werden,
wobei immer die selben Schattenbilder im Hintergrund benutzt werden
(drei Ecken und zwei sich wiederholende Kacheln für die Seite und für unten).
Für Bilder-Rahmen: Liegt das Motiv in der Zentralen Tabellenzelle,
die auf allen vier Seiten von je einer Kolonne oder Zeile umgeben ist.
Bildbearbeitung ist raffinierter
Das Einfachste ist natürlich noch immer, Schatten, Rahmen oder Spiegelungen in das bearbeitete Bild zu integrieren.
Check den Code.