Für die meisten eurer Projekte wird der Hintergrund eurer Homepage eine wichtige Rolle einnehmen. Ihr habt hier verschiedene Möglichkeiten und nun die Qual der Wahl, ob ihr einfarbige hintergründe einbinden möchtet, oder ein Hintergrundbild einsetzen wollt. Auch hier möchte ich euch nichts vorenthalten und zeige euch nun beide Möglichkeiten.

Für einfarbige Hintergründe legt ihr am einfachsten im Stylesheet die Hintergrundfarbe des Bodys fest.

1

background-color: #808080;

Wenn ihr allerdings ein Hintergrundbild einbauen möchtet, dann könnt ihr es so machen:

1
2
3

{ 
background-image: url(images/banner.jpg);
}

Es ist allerdings empfehlenswert ihr ein weiteres Element einzubinden, damit sich das Hintergrundbild nicht unendlich wiederholt, denn wenn ihr zum Beispiel euer hintergrundbild auf 1024px breite ausgelegt habt, dann wird es sich ab 1025px stetig wiederholten was nicht wirklich schön aussieht.
Also macht einfach einen kleinen Trick:

1
2
3
4

{ 
background-image: url(images/banner.jpg); 
background-repeat:no-repeat;
}

Hierdurch verhindert ihr genau diesen Effekt. Wenn ihr möchtet könnt ihr auch seperat auswählen ob sich das Bild nur horizontal wiederholen soll oder vertikal wiederholen soll, dann nutzt ihr folgenden Funktion:

1
2
3
4

{ 
background-image: url(images/banner.jpg); 
background-repeat:repeat-x;
}

Diese Funktion dient der wiederholung auf der X-Achse also horizontal, wenn ihr es Vertikal auf der Y Achse wiederholen lassen wollt dann ersetzt dass X einfach durch ein Y.