php-homepage.com

CSS background

Die Gestaltung des Hintergrundes einer Webseite lässt sich mit folgenden Mitteln realisieren:

css background

Syntax für Hintergrundfarbe

Selektor {Eigenschaft:Wert;}
.div1{background-color:blue} oder
.div1{background-color:#00f;}

Definiert eine einfache, durchgängige Farbe für den Hintergrund des selektierten Elementes(.div1).

Syntax für Hintergrundbild

.div1{background-image: url("beispielgrafik.gif");}
Will man eine Grafik/ein Bild als Hintergrund verwenden, verwendet man obige Syntax, hier ist zu beachten,
den Pfad relativ zum Stylesheet anzugeben. Natürlich kann man verschiedene Formate verwenden (.jpg, .png), aber immer auf die Dateigröße achten - Ladezeiten!

Weitere Eigenschaften für background-image sind:

CSS3 ermöglicht sogar mehrere Hintergrundbilder und Eigenschaften
(ab ie9 unterstützt)

background-image: url(beispielgrafik1.gif), url(beispielgrafik2.gif);
Hier werden mehrere Grafiken kommasepariert angehängt und nach Ebenenprinzip angezeigt (erste Grafik ganz vorne/oben).
Somit kann man mehrere Hintergrundgrafiken für ein Element verwenden und diese (optisch) nebeneinander bzw. hintereinander anordnen.
Positionierung in der Reihenfolge wie oben eingebunden:
.div1{background-position: right bottom, left top;}

Die gleiche Syntax gilt auch für wiederholen (repeat) der Hintergrundgrafiken,
praktisch wenn man ein responsives Design hat, dann wird der Hintergrund automatisch auf die benötigte Breite ausgefüllt.
.div1{background-repeat: no-repeat, repeat;}

background-size: die Größe des Hintergrundbildes festlegen(CSS3)

mögliche Werte sind:

background-origin: eine andere Möglichkeit den Anfangspunkt der Hintergrundgrafik festzulegen (CSS3)

mögliche Werte sind:

background-clip: bezieht sich zwar auf die Hintergrundfarbe, aber die Werte und Ergebnisse sind die gleichen wie bei bei background-origin (CSS3)

mögliche Werte sind: