 Hintergrundbilder (CSS-Anweisungen für den BODY)
Bilder als Wasserzeichen, die hinter den anderen Seitenelementen einer Webseite angezeigt werden, Hintergrundgrafiken als Textur, als zusätzliche Spielerei oder als Layoutelement einer Webseite.
|
|
Hintergrundgrafiken mit CSS - Grundlagen
Hintergrundbilder / -grafiken kann man mittels HTML-Befehlen oder CSS-Anweisungen einbinden. Die Einbindung mittels CSS-Anweisungen bietet weit mehr Möglichkkeiten und ist zeitgemäßer. Erklärungen zur Einbindung mit CSS daher gleich im ersten Abschnitt dieser Seite. Eine Beschreibung der Einbindung mit HTML-Anweisungen finden Sie weiter unten.
Hintergrundgrafik einbinden mit CSS-Anweisungen
1 Der Syntax
Varianten, ausführliche Erklärungen und  Beispiele finden Sie auf den anderen Seiten zu diesem Thema. Erst einmal der grundsätzliche Syntax der CSS-Anweisungen für die Einbindung einer Hintergrundgrafik. Sie sehen hier die Notierung der 5 Eigenschaften, einmal in separater Schreibweise und als Kurzschreibweise:
Demo 01 ansehen 
Demo 02 ansehen
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(bg-grafik.gif);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
}
-->
</style>
<style type="text/css">
<!--
body {
background: #FFFFF url(log.gif) no-repeat fixed bottom right;
}
-->
</style>
Bei der Kurzschreibweise müssen Sie die Reihenfolge der 5 Eigenschaften nicht einhalten. Die Eigenschaften sind nicht durch Komma oder Semikolon getrennt!
| <background-color> |
Hintergrundfarbe |
| <background-image> |
Hintergrundbild |
| <background-repeat> |
Wiederholungs-Effekt |
| <background-attachment> |
Wasserzeichen-Effekt |
| <background-position> |
Hintergrundposition |
Die Angabe für eine Hintergrundfarbe bezieht sich auf den Seitenbereich, der nicht durch die Grafik abgedeckt wird. Das ist besonders wichtig bei transparenten Grafiken (GIF PNG) und bei einer kleinen, nicht wiederholten Hintergrundgrafik. Wird eine JPG-Grafik eingebunden, sollte man diesen Farbwert mit der Grafik abstimmen.
Wiederholungs-Effekt
Als Attribut für die Wiederholungsanweisung können Sie unterschiedliche Werte eintragen:
| |
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) |
allgemeine Regeln
Ist das eingebundene Image nicht groß genug den gesamten Bereich zu füllen und man verhindert das nicht explizit, wird es wiederholt (das Bild wird gekachelt). Daher auch der Name Hintergrundkachel für Grafiken, die sich nahtlos aneinanderfügen. Bei einem zu großen Bild wird ohne weitere Angaben die Grafik rechts und unten 'abgeschnitten'.
2 CSS-Anweisungen für ein (Seiten-)Hintergrundbild
Die Anweisungen für eine Seiten-Hintergrundgrafik stehen innerhalb des CSS-Anweisungsblocks für den Selektor 'body'. Die Anweisungen können in der Kurzschreibform (1 Zeile) oder aufgegliedert (mehrere Zeilen) notiert werden.
<style type="text/css">
<!--
body {
background-image:url(images/grafik01.gif);
background-position:0px 0px;
background-attachment:fixed;
}
-->
</style>
<style type="text/css">
<!--
body {
background:url(grafik01.gif) #FFF1BE no-repeat bottom right fixed;
}
-->
</style>
Die Seite hat die Hintergrundgrafik 'grafik01.gif' die unten rechts positioniert werden soll und nicht wiederholt wird. Beim Scrollen bleibt die Grafik an dieser festen Position! Dort, wo die Grafik den Hintergrund nicht füllt, ist die Farbe '#FFF1BE' zu sehen
Siehe Menüpunkt 'Beispiele' für weitere Anweisungsmöglichkeiten!
3 Hintergrundbild für Tabellen und Tabellenzellen
Anweisungen für Hintergrundgrafiken können Sie im Gegensatz zur Inline-Einbindung
<style type="text/css">
<!--
<table style="background:url(grafik.gif)" ...
-->
</style>
auch global festlegen. Sie entscheiden, ob diese Anweisung für alle Tabellen (der Seite) gelten soll oder durch Definition von Unterklassen nur für bestimmte Tabellen / Tabellenzellen gültig ist.
Im HEAD-Bereich ihrer Datei (oder in einer exterenen CSS-Datei)
<style type="text/css">
<!--
/* für alle Tabellen */
table
{
background: url(grafik01.gif) #FFD7EA ;
background-position: top left;
background-repeat: repeat;
}
/* für alle Tabellenzellen */
td
{
background: url(grafik02.gif) #FFD7EA ;
background-position: top left;
background-repeat: repeat;
}
/* für Tabellen der Klasse 'hintergrund01' */
table .hintergrund01
{
background: url(grafik03.gif) #FAFAFA ;
background-position: bottom right;
background-repeat: repeat;
}
/* für Tabellenzellen der Klasse 'hintergrund02' */
td .hintergrund02
{
background: url(grafik04.gif) #FFFFFF ;
background-position: bottom right;
background-repeat: no-repeat;
}
-->
</style>
Das class-Attribut im HTML-Tag (hier als Beispiel für eine Tabellenzelle):
<td class="hintergrund02" ...
Zum Thema 'Hintergrundgrafiken' lesen Sie die Informationen auf den Seiten:
 2) Hintergrundbild großflächig
3) positionierte Hintergrundgrafik
4) Gekachelte Grafiken als Tabellen- und Seitenhintergrund
HTML-Anweisung für ein Hintergrundbild
Das HTML-Attribut für ein Hintergrundbild sieht üblicherweise so aus:
Seite: <body background="bild.jpg" ... >
Tabelle: <table background="../bild.gif" ... >
Tabellezelle: <td background="../images/bild.jpg" ... >
Hintergrundgrafiken die über HTML-Anweisungen in Webseiten eingetragen wurden, waren oft recht groß, mussten sie doch z.B. das gesamte Element Seite ausfüllen. Möglichkeiten die Grafik zu positionieren gab es nicht. Hintergrundgrafiken werden heute über CSS-Anweisungen in Webseiten notiert. Mit CSS hat man die Möglichkeit die Grafiken zu positionieren (rechts, links oben, unten) und kann auch kleinflächige Grafiken einsetzen, die einen Abstand zum Element haben sollen.
|
Home • Bilder • CSS • Hintergrundgrafiken