Hintergrund gestalten
Wir haben 4 Möglichkeiten für den Hintergrund hinter dem Design:
- Hintergrund mit Farbton (einfarbig oder Farbverlauf)
- eine kleine Grafik, die sich endlos wiederholt
- ein großes Motiv, das sich jeder Bildschirmauflösung anpasst
- eine Grafik (z.B. Farbverlauf), die sich endlos nach rechts wiederholt
Hintergrund einfarbig / ohne Grafik:
body {
background: none #000000;
}
Hintergrund mit Farbverlauf / ohne Grafik
Tipp: http://colorzilla.com/gradient-generator. Farbverlauf wählen, Code kopieren.
Er berücksichtigt auch den Internet-Explorer. Code einfügen bei body {
body {
background: linear-gradient(0deg, #000000, #EEEEEE);
}
Hintergrundbild mit Farbverlauf
Bei einer Grafik mit Farbverlauf spielt seine Breite keine Rolle. Da reichen schon 2 Pixel.
Die Grafik wird mit repeat-x; endlos nach Rechts wiederholt und füllt somit jede Bildschirmauflösung aus. Zusätzlich verwenden wir einen Farbton. Es muss der Farbton sein
mit der die Grafik unten auch endet.
body {
background: url(Grafikadresse) #E0A4FA repeat-x;
}
Grafik, die sich endlos wiederholt
Die Grafiken sind so geschnitten, das die Wiederholung im Muster nicht auffällt.
Vorteil ist das diese Grafiken schnell geladen werden können. zu den Anbietern
body {
background: url(Grafikadresse) repeat;
}
großes Motiv, passend für alle Bildschirmauflösungen
Das Bild sollte mindestens 1280 Pixel breite haben.
Kleine Bilder sehen Besucher mit höherer Bildschirmauflösung sonst pixelig
body {
background: url(Grafikadresse) no-repeat center center fixed;
background-size: cover; }
no-repeat = Motiv wiederholt sich nicht
center center = Motiv mittig und zentriert
fixed = Motiv scrollt nicht mit
