Hintergrundbild in HTML und CSS

Ein Hintergrundbild in die eigene Website einzufügen ist überhaupt kein Problem. Dabei gibt es auch verschiedene Wege, wie du das machen kannst. Der eleganteste Weg ist dabei sicherlich die Einbindung mit CSS. Dazu legst du dann in deinem Stylesheet fest, wo und wie der Browser das Hintergrundbild anzeigen soll. Ein anderer Weg ist über HTML direkt. Diese Methode gilt jedoch als veraltet.

Dennoch stelle ich dir an dieser Stelle beide Methoden vor.

 

Hintergrundbild in HTML einbinden

Wenn du in HTML selbst eine Hintergrundgrafik einbinden möchtest, kannst du das wie folgt tun. Schaue dir dazu das folgende Code-Beispiel an.

 

Beispiel:

<html>
<head>
<title>Hintergrundbild in HTML</title>
</head>
<body background="hintergrund.jpg">
<p>Hier steht ein toller Text</p>
</body>
</html>

 

Erklärung:

Mit dem Attribut background legst du dabei das Bild im Hintergrund fest. Du kannst dazu jedes Bildformat nutzen. Um eine mögliche Probleme bei der Darstellung zu vermeiden, solltest du dabei auf die Formate JPG, GIF oder PNG setzen. Die URL kann absolut oder relativ sein. Im eben gezeigten Beispiel müsste sich die Datei im gleichen Verzeichnis befinden wie das HTML Dokument.

 

Wichtiger Hinweis:

Wie in der Einleitung schon erwähnt, gilt diese Methode als veraltet. Wenn du dich an den modernen Standard HTML 5 halten möchtest, solltest du auf diese Methode verzichten. Im Folgenden zeige ich dir daher, wie du ein Hintergrundbild mit CSS festlegen kannst. Da diese Methode standardkonform ist, solltest du sie vorrangig benutzen.

 

Hintergrundbild mit CSS festlegen

Mit CSS wählst du die moderne Art und Weise, ein Bild im Hintergrund deiner Website erscheinen zu lassen. Diese ist dabei auch nicht wirklich schwer umzusetzen. Ähnlich wie in der Variante über HTML, musst du auch hier nur eine zusätzliche Eigenschaft mit in dein Stylesheet aufnehmen. Im folgenden Beispiel zeige ich dir dabei, wie das funktioniert.

 

Beispiel:

/* Beispiel 1 */

body {
 background-image:url(hintergrund.jpg);
 }


/* Beispiel 2 mit absoluter URL */

body {
  background-image:url(http://deinedomain.de/bilder/hintergrund.jpg);
  }

 

Erklärung:

Mit der Eigenschaft background-image legst du schließlich das Hintergrundbild in CSS fest. Beachte bitte die Pfadangabe zur Bilddatei. In Beispiel 1 oben müsste das Bild dazu im gleichen Verzeichnis wie die HTML-Datei sein. Du kannst aber auch relative oder absolute Dateipfade angeben, wie in Beispiel 2 oben genannt.

Du kannst an dieser Stelle dem Bild auch weitere Effekte hinzufügen. Du kannst so bspw. ein Hintergrundbild automatisch skalieren lassen.

 

Allgemeiner Hinweis

Du solltest bei der Verwendung von Hintergrundbildern darauf achten, dass der Text lesbar sein. Ein Hintergrundbild sollte genau da bleiben, wie der Name es schon sagt: Im Hintergrund.

Wähle also ein nicht allzu auffälliges Bild. Es sollte nur sehr subtil wahrgenommen werden können. Überlege, ob es nicht vielleicht einfach eine Hintergrundfarbe ausreicht, oder ob es wirklich ein Bild sein muss.

 

Fazit

Wie du siehst, kannst du ganz einfach ein eigenes Hintergrundbild für deine Website festlegen. Du kannst dies dabei in HTML direkt machen, oder aber mit CSS. CSS ist dabei die Lösung der Wahl. Die HTML Variante gilt als veraltet.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.