Fortlaufender Hintergrund mit Grafiken und CSS

CSS Hintergrundgrafiken sind ein Gestaltungsmittel mit denen ansprechende Effekte erzeugt werden können. Die Einbinung von Hintergrundgrafiken mit CSS sieht man auf amerikanischen Webseiten sehr häufig.

Vorgehensweise

Zuerst habe ich 2 Grafiken erstellt. Den Tulpenkopf und die Stengelgrafik.

Die Tulpe habe ich aus einem Bild freigestellt und den den Stengel entfernt. Mit dem Grafikprogramm habe ich einen neuen Stengel gezeichnet. Die Stengelgrafik habe ich auf 3px gekürzt, da sich die Grafik nur wiederholt und wir damit Speicherplatz sparen. Als nächster Schritt folgt die Einbindung mit CSS.

Mein CSS sieht folgendermaßen aus:

body {
 background: #fff url(/css-examples/170_9/tulpenstengel.gif) repeat-y;
 margin: 0;
 padding: 0;
}

#head {
background: transparent url(/css-examples/170_9/tulpe.jpg) no-repeat;
padding: 0;
margin: 0;
}

h1, p, ol {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 0 0 0 190px;
 padding-top: 12px;
}

h1 {
 font-size: 1.5em;
}

p, li {
 font-size: 0.8em;
 line-height: 1.5em;
}

pre {
        color: #0000ff;
        margin-left: 5%;
}

Als Seitenhintergrund habe ich im body mit background: url(/css-examples/170_9/tulpenstengel.jpg); die Stengelgrafik festgesetzt. Damit sich die Grafik nur vertikal wiederholt, habe ich noch repeat-y hinzugefügt. Somit wird am linken Rand der Seite der Stengel durchgehend angezeigt.

Als 2. Schritt habe ich einen <div id="head"></div> Container erstellt. Dem #head Container habe ich dann mit background: transparent url(/css-examples/170_9/tulpe.jpg) no-repeat; den Tulpenkopf zugewiesen.

Damit der Kopf der Tulpe nahtlos mit dem Stengel verschmiltzt, habe ich padding und margin des #head Containers auf 0 gesetzt.

Sollte jemand Fragen zu diesem Tipp haben, so schreibt bitte an rene@grassegger.at