Hintergrundbild einfügen - Hintergrundgrafik positionieren
 HomeBilderCSS • Hintergrundgrafiken Demo 01  Demo 02 

Hintergrundbilder   (CSS-Anweisungen)

Bilder als Wasserzeichen, die hinter den anderen Seitenelementen einer Webseite angezeigt werden, Hintergrundgrafiken als Textur, als zusätzliche Spielerei oder als Layoutelement einer Webseite.
grafiken background seitenhintergrund grundlagen syntax css

Hintergrundgrafiken mit CSS - Grundlagen

Hintergrundgrafiken kann man mittels HTML-Befehlen oder CSS-Anweisungen einbinden. Die Einbindung mit 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

Hintergrundgrafik einbinden Hintergrundgrafik einbinden


Die Einbindung von Hintergrundgrafiken mit CSS-Anweisungen bietet viele Möglichkeiten.

Hintergrundgrafik einbinden Positionierung

Die X-Y Positionsangaben können Sie in Schlüsselwörten oder Maßeinheiten notieren: center, top, left, right, em, Pixel, Prozent . Neue Browser interpretieren auch unterschiedliche (gemischte) Maßeinträge wie Prozent + Pixel.

X-Y Positionen ohne trennendes Komma eintragen! Beispiele:
background: #FFFFFF url(grafik.png) no-repeat scroll 100px 100px;
background: #FFFFFF url(grafik.png) no-repeat scroll right bottom;
background: #FFFFFF url(grafik.png) no-repeat scroll 0px 100%;
Weitere Infos zur Positionierung von Seiten-Hintergrundgrafiken hier

Demo-Seite zur Positionierung von Seiten-Hintergrundgrafiken hier



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" ...




   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.






Zum Thema 'Hintergrundgrafiken' lesen Sie die Informationen auf den Seiten:

1) Hintergrundbild einfügen - Seiten-Hintergrundgrafik

2) Hintergrundbild großflächig - optische Balance oder Blendschutz

3) positionierte Hintergrundgrafik

4) Hintergrundgrafik gekachelt - wiederholte Anzeige

Imagegröße zerren, Pixelgrafik als Hintergrund

Hintergrundgrafik zentrieren