Kostenlose Hintergrundgrafiken für die Homepage

So fügt man ein Hintergrundbild in die Homepage ein

Der sauberste Weg, um eine Hintergrundgrafik in die Homepage einzufügen, ist via CSS. Für Anfänger mag das erst einmal ziemlich kompliziert erscheinen, ist es aber nicht. Es geht zwar auf anderem Wege noch einfacher, aber CSS bietet die vielfältigsten Möglichkeiten. Daher versuche ich hier mein Bestes, das Prozedere anfängergerecht und ausführlich zu erklären. Dabei setze ich voraus, dass du weißt, wie du in den Bearbeitungsmodus des Quellcodes deiner Homepage gelangst und wie man Webseiten auf seinen Webspace lädt.

Dieses Anfänger-Tutorial zeigt nur die allerersten Grundlagen. Ein weiteres Tutorial, das zusätzliche Möglichkeiten der Platzierung von Hintergrundgrafiken aufzeigt, wrd folgen.

1. Das Hintergrundbild aussuchen und abspeichern

Wenn du dich für eine Hintergrundgrafik entschieden hast, musst du sie auf deiner Festplatte in den Ordner deiner Homepage speichern. Sinnvoll ist es dabei, sie nicht in das Hauptverzeichnis zu speichern, also in die Ebene, in der deine Index-Datei liegt (die index.html, index.htm oder ähnlich heißt), sondern einen Ordner dafür anzulegen. In diesem Fall nennen wir diesen Ordner "bilder".

2. Eine einfache CSS-Datei erstellen

Eine CSS-Datei kannst du mit dem Editor erstellen. Rufe ihn auf und speichere die (noch leere) Datei im Hauptverzeichnis deiner Homepage ab, also in der Ebene, in der die Index-Datei liegt. Wichtig bei diesem Speichern:
Gib der Datei die Endung .css und wähle bei Dateityp "Alle Dateien" aus.

CSS-Datei speichern

Wenn du diese Datei später öffnen möchtest, kann es sein, dass du dazu beim ersten Mal den Programmtypen angeben musst. Wähle aus der Programmliste den Editor aus und setze ein Häkchen bei "Dateityp immer mit dem ausgewählten Programm öffnen".

In die style.css trägst du nun Folgendes ein:

body
{
background-color: #fff;
background-image: url(http://www.meinehomepage.de/bilder/hintergrundbild.gif);
}

In diesem Fall ist die Hintergrundfarbe weiß (#fff). Die angegebene Hintergrundfarbe wird angezeigt, bis die Hintergrundgrafik geladen ist. Auch wenn das meistens so schnell geht, dass man es nicht mitbekommt, solltest du auf die Angabe der Hintergrundfarbe nicht verzichten und eine Farbe wählen, die deinem Hintergrundbild ähnlich ist. Die background-image-Zeile musst du natürlich noch anpassen. Trage dort den Namen deiner Homepage und deiner Hintergrundgrafik ein. Speichern - fertig. Zumindest reichen diese Angaben für dein Hintergrundbild, aber es ist wirklich sinnvoll, sich darüber hinaus mit CSS auseinanderzusetzen und mit dem Stylesheet weitere Darstellungen (z. B. von Schriftgröße, Schriftfarbe, Schriftart, Überschriften u.s.w.) zu steuern. Aber das ist nicht unser Thema.

Die Hintergrundgrafik wird gekachelt dargestellt, also horizontal und vertikal aneinander gefügt.

3. Link zum Stylesheet im HEAD-Bereich der Homepage einfügen

Wechsle in die Quellcode-Ansicht deiner Homepage. Im oberen Bereich findest du einen Abschnitt, der in etwa so aussieht:

<head>
<title>Der Titel meiner Homepage</title>
</head>

Etwas mehr wird dort sicherlich stehen, entscheidend ist die Zeile </head>. Davor fügst du diese Zeile ein:

<link rel="stylesheet" href="http://www.meinehomepage.de/style.css" type="text/css">

So sollte es dann also aussehen (natürlich mit der Adresse deiner Homepage):

<head>
<title>Der Titel meiner Homepage</title>
<link rel="stylesheet" href="http://www.meinehomepage.de/style.css" type="text/css">
</head>

Die Zeile fügst du in alle Dateien deiner Homepage ein, die den von dir gewählten Hintergrund haben sollen.

Solltest du für verschiedene Seiten deiner Webseite unterschiedliche Hintergründe verwenden wollen, ist das auch nicht schwer. In dem Fall legst du einfach für jeden Hintergrund eine eigene CSS-Datei an und verlinkst diese genau wie eben beschrieben. Zum Beispiel hintergrund1.css, hintergrund2.css und so weiter.

4. Hochladen

Wenn du alles gespeichert hast, brauchst du nur noch alle Dateien auf deinen Webspace laden. Die HTML-Dateien also, den Ordner "bilder" und die CSS.

Wenn es dann nicht funktioniert, hast du entweder nicht richtig gelesen oder ich habe es schlecht erklärt.



Impressum | Hinweise zum Datenschutz