Wer ein Weblayout möchte, das nicht von der Stange ist, greift häufig zu einer seitenfüllenden Background-Grafik. Das hat seine Tücken, denn nicht jeder Besucher einer Website hat die gleiche Auflösung eingestellt wie der Webdesigner. So kann es vorkommen, dass die Background-Grafik entweder doch zu klein oder aber zu groß ist, und daher unschön abgeschnitten dargestellt wird. Ferner gilt zu bedenken, dass eine solche Grafik von der Dateigröße, und also von der Ladezeit, her recht unerfreulich sein dürfte.
Dank PI und CSS gibt es Alternativen!
Hinweis:
Dieser Tipp ist eine Coproduktion mit Friedhelm von meiner Partnerseite. Die Einzelheiten dazu, wie Du Grafiken wie die hier vorgestellte, in Deine Webseite einbinden kannst, findest Du in Friedhelms CSS-Fundgrube anschaulich erklärt. Ein Besuch lohnt sich!
Mit relativ einfachen Mitteln ist so etwas wie auf diesem etwas unscharfen Bildschirmausschnitt möglich:
Machen wir uns an die Arbeit!
Die reine mittels CSS zusammen gesetzte Grafik sieht in verkleinerter Form so aus:
Und das sind die Einzelbilder, die es zu erstellen gilt:
Teilgrafik 1: Teilgrafik 2:
1. Teilgrafik
Öffne eine neue Leinwand in 160x165 px und fülle sie mit einem himmelblauen Farbverlauf:
Aus der Werkzeugpalette wählst Du das Pfad-Zeichenwerkzeug und ziehst damit einen 10 Pixel schmalen Balken in einer Erdfarbe (#ac9662) auf, der über die gesamte Breite der Leinwand reicht. Ordne diesen Balken unten an:
Lasse den Balken aktiviert und vollziehe einen Rechtsklick auf ihn. Verdoppele ihn über "Duplizieren". Nun ist dieser verdoppelte Pfad aktiviert und Du kannst ihn über "Bearbeiten" - "Füllen" mit einem Grasgrün (#387728) füllen.
Da auch dieses Pfadobjekt 10 px hoch ist kannst Du es über zehn Klicks auf die nach-oben-Pfeiltaste Deiner Tastatur pixelgenau über den erdfarbenen Streifen platzieren.
Wähle erneut das Pfad-Zeichenwerkzeug und ziehe in dem gleichen Grün wie eben die "Benutzerdefinierte Form Fl09", ...
... das Kleeblatt, auf. Platziere es auf der Leinwand. Fertig ist die Teilgrafik 1!
kleeblatt.gif
2. Teilgrafik
Die zweite Teilgrafik schneidest Du einfach aus der ersten Teilgrafik aus. Hierzu lösche das Kleeblatt aus der Leinwand oder revidiere die letzten Arbeitsschritte über den Rückgängig-Pfeil bis das Kleeblatt verschwunden ist und nur noch der Farbverlauf mit dem grünen und Balken zu sehen sind.
Aus der Werkzeugpalette aktiviere das "Zuschneidewerkzeug" und schneide aus der Leinwand einen 10 px breiten Streifen heraus. Achte dabei darauf, dass der Ausschnitt sich nicht auch von der Höhe her verändert, da es sonst später zu einer verzogenen Gesamtgrafik kommt:
Fertig ist auch die Teilgrafik 2!
konsole.gif
Wie Du die Teilgrafiken mittels CSS zum Beispiel zu einem schmucken Header in Deine Homepage einbaust, erklärt Dir Friedhelm in seiner CSS-Fundgrube!