Der Header ist euch immer noch zu langweilig? Na gut, garnieren wir ihn mit einer Hintergrundgrafik.
Zu diesem Zweck hat uns Adlerauge - wie kann's auch anders sein - dankenswerter Weise eine kleine Kachelgrafik zur Verfügung gestellt.
Kopiert sie euch in den gleichen Ordner, der eure "index.html" und "style.css" beinhaltet.
Fügt den CSS-Angaben des #header noch folgendes hinzu (selbstverständlich könnt ihr auch eine eigene Grafik verwenden) und schon habt ihr eine schöne Hintergrundgrafik:
background-image: url(kachel.jpg);
Ihr wollt ein größeres Banner als Hintergrund einfügen? Auch das ist möglich.
Nehmen wir hierzu folgende transparente Grafik "banner1.gif" mit der Größe 750px auf 80px. Speichert euch diese Datei bitte ebenfalls in den Ordner, der eure "index.html" enthält.
Ergebnis:
Auch diese Grafik wiederholt sich bei größeren Bildschirmen. Das wollen wir jedoch in diesem Fall unterbinden.
Wir ergänzen deshalb unseren #header mit
background-repeat: no-repeat;
und sind schon einen Schritt weiter.
Jetzt soll das Banner noch zentriert werden. Dafür gibt es
background-position: center;
Gehen wir jetzt einmal von der Banner-Variante aus und betrachten unsere CSS-Angaben für den Header. Da kommt ziemlich oft "background" vor, allerdings mit unterschiedlichen Eigenschaften und Werten.
Nämlich:
background-color:#FF9900;
background-image: url(banner1.gif);
background-repeat: no-repeat;
background-position: center;
background: #FF9900 url(banner1.gif) no-repeat center;
Damit sieht unser CSS-Header jetzt so aus:
#header
{
border-top: 3px solid #990000;
border-right: 3px solid #990000;
border-bottom: 3px double #003300;
border-left: 3px double #003300;
background: #FFCC00 url(banner1.gif) no-repeat center;
}
Dass wir trotz Hintergrundgrafik immer noch die Hintergrundfarbe beibehalten, hat folgenden Sinn:
Es kann möglich sein, dass die Hintergrundgrafik nicht den gesamten Platz ausfüllt, oder transparent ist. Für diesen Fall bietet sich eine passende Hintergrundfarbe an.
Auch für den Fall, dass bei langsamen Internetzugängen die Hintergrundgrafik langsam geladen wird bietet es sich an, eine Hintergrundfarbe zu hinterlegen, die als "Ersatz" dargestellt wird, bis die Grafik vollständig erscheint.
Seht euch mal hier etwas um, welche weitere Eigenschaften es zum background noch gibt.
Abstände werden mit CSS per Margin definiert.
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url: