 Hintergrundbilder 04 - (gekachelt)
Hier behandle ich das Thema Kacheln als Hintergrundbilder für Seiten- oder Elementhintergrund. Kleine Grafiken, die den Anzeigebereich oder die Elementbereiche mit grafischen Mustern füllen sollen.
Hintergrundbilder / -grafiken können mit HTML-Befehlen oder CSS-Anweisungen eingebunden werden. Die Einbindung mit CSS-Anweisungen bietet Möglichkeiten zur Anpassung. Möchte man eine Fläche nicht nur einfarbig füllen oder einen wenig langweiligen 'Blendschutz' herstellen, halte ich den Einsatz von Hintergrundgrafiken für sinnvoll.
Wiederholung der Grafiken
Ist die eingebundene Grafik nicht groß genug den gesamten Bereich zu füllen wird sie automatisch wiederholt (das Bild wird gekachelt). Daher auch der Name Hintergrundkachel für Grafiken, die sich nahtlos aneinanderfügen lassen. Eine Wiederholong der Darstellung könnte man zwar mit 'no-repeat' unterdrücken aber das ist hier nicht gewollt.
|
Hier sehen sie Hintergrundkacheln, die den nahtlosen Übergang zulassen. Das funktioniert wie bei gemusterten Tapeten, die (ohne Rapport) nebeneinander geklebt eine Fortsetzung des Musters vorsehen. Diese Grafiken sind speziell für diesen Zweck entworfen.
|
|
Klicken sie zur Demo auf eine der Grafiken (die Fenster schließen beim nächsten Klick).
Im Fenster wurde die Kachel als Hintergrund notiert. Zusätzlich wird die Kachel als Image (mit Rand) angezeigt.
Wird die Grafik hinter einen Text gelegt, sollte man auf Lesbarket und Kontrast achten. Eine pastellfarbene, wenig lebendige Grafik ist da gerade noch erlaubt.
Als Hintergrund für Tabellenzellen die Text enthalten, sind diese Kacheln eher geeignet. Natürlich hängt das von Schriftgröße und Textfarbe ab (zur Demo anklicken).
HTML-Anweisung für ein Hintergrundbild
Die Referenz für ein Hintergrundbild, das für die gesamte Seite angezeigt werden soll steht im BODY-Tag. Dazu wird das Attribut 'background' verwendet. Aber auch andere Seitenelemente (<table>, <td> <layer>) lassen eine Einbindung zu.
<body background="bild.jpg" ... >
<th background="../bild.gif" ... >
<td background="../images/bild.jpg" ... >
CSS-Anweisungen für ein Hintergrundbild
body {
background:url(grafik.gif);
margin:0px;
padding:0px;
}
Interessant als Variante:
body {
background:url(grafik.gif) fixed;
margin:0px;
padding:0px;
}
fixed = Beim Scrollen wird der Hintergrund nicht bewegt.
Weitere Beispiele für Kacheln
Zur Demo können sie die Kacheln unten anklicken (die Fenster schließen beim nächsten Klick).
Hier sehen sie einige Hintergrundkacheln, die für den nahtlosen Übergang entworfen wurden. Als Texthintergrund sind sie nicht geeignet. Im Demo-Fenster wurde die Kachel als Hintergrund notiert. Zusätzlich wird die Kachel als Image (mit Rand) angezeigt.
Wo gibts gemusterte Kacheln?
Bei http://www.tilemachine.com
Auch in meiner  MINI-IMAGE-BOX biete ich nun einige Grafiken an, die als Hintergrundkachel geeignet sind. Besonders die Punktraster oder die Grafiken 'Sandpapier' halte ich für geeignet.
Mini-Image-Box Menü: Backgrounds
| |
|
Weitere Möglichkeiten bieten sich mit Hilfe von diesen CSS-Anweisungen
| |
+ Anweisung |
Notiz |
| background-repeat: |
repeat; |
wiederholen / kacheln |
| background-repeat: |
repeat-x; |
waagerecht für 1 Zeile wiederholen |
| background-repeat: |
repeat-y; |
senkrecht für 1 Spalte wiederholen |
| background-repeat: |
no-repeat; |
nicht wiederholen (nur 1 X anzeigen) |
|
Zum Thema 'Hintergrundgrafiken als Blendschutz und zur optischen Balance' lesen sie die Informationen auf der Seite 01:
 Seite 01: Grafiken als Bildschirmfüller und Seitenhintergrund
Imagegröße zerren, Pixelgrafik als Hintergrund
Beispiele und Demos
 Beispiel 01 Kachel Beispiel 02 Kachel (mit eingebautem Fehler zur Demo)
Wählen Sie für die Grundeinstellungen im Body-Tag (bgcolor) immer einen Farbton ähnlich des Grundtons des Hintergrundbildes.
| |
|
Vermeiden sie es, wirkliche Mini-Bider von 1x1 Pixel einzubinden. Der Aufbau der Seite verzögert sich enorm (Rechnerzeit) Beispiel
| |
schlechte (na ja) Beispiele
Text im Vordergrund |
| Beispiel 1:
Das Image mit den Maßen 400 x 158 Pixel wird nicht ganz dargestellt. |
|
|
Text im Vordergrund |
| Image:  (55 Bytes)
Das Image mit den Maßen 4 x 8 Pixel wird gekachelt um den gesamten Bereich zu füllen. Ungeeignet für Text im Vordergrund! |
|
|
Text im Vordergrund |
| Image:  (51 Bytes)
Das Image mit den Maßen 6 x 6 Pixel wird wiederholt um den gesamten Bereich zu füllen (gekachelt). Ungeeignet für kleinen Text |
|
|
Text im Vordergrund |
| Image:  (50 Bytes)
Das Image mit den Maßen 7 x 18 Pixel wird wiederholt um den gesamten Bereich zu füllen (gekachelt). |
|
|
|
Haben Sie schon mal an diese Variante gedacht? Auch das ist möglich: Ein animiertes Gif im Hintergrund (gekachelt).
| |
Text im Vordergrund |
| Image:  (601 Bytes)
Auch das ist möglich: Ein animiertes Gif im Hintergrund (gekachelt). Abhängig vom Browser Refresh / neu laden. |
|
|
Zum Thema 'Hintergrundgrafiken' lesen sie die Informationen auf den Seiten:
 1) Hintergrundbild einfügen
2) Hintergrundbild großflächig
3) positionierte Hintergrundgrafik
|
Home
ZURÜCK )
)
)
)
)
)
)
)
)
)
)
)
)
)
)