Hintergrund auswählen und anpassen
Um einen Hintergrund für Ihre Webseite zu erstellen, benötigen Sie zunächst das passende Bild.
- Dabei können Sie sowohl auf ein eigenes Bild als auch auf ein öffentliches Bild von einer anderen Webseite zurückgreifen. Sie müssen das Bild also nicht zwangsläufig auf Ihrem eigenen Webserver haben.
- Sie können für das Hintergrundbild jedes gängige Bildformat nutzen, also zum Beispiel jpg, png oder gif. Allerdings sollten Sie bedenken, dass Hintergrundbilder für Webseiten grundsätzlich sehr groß werden können, und daher eher ein komprimiertes Format wie jpg verwenden.
- Falls Sie kein bestimmtes Motiv verwenden, sondern zum Beispiel nur einen dunklen Holz-Hintergrund wollen, muss das gewünschte Bild auch keine bestimmte Größe haben, da Sie das Bild beliebig oft wiederholen lassen können. Anderenfalls sollten Sie das gewünschte Bild am besten an die Breite bzw., wenn möglich, auch an die Höhe Ihrer Webseite anpassen.
Hintergrundbild mit CSS einbinden
Sobald Sie das passende Bild ausgewählt haben, können Sie dieses mit CSS-Code in Ihre HTML-Datei einbinden.
- Starten Sie dafür einen Texteditor und öffnen Sie ein leeres Dokument.
- Um einen Hintergrund für Ihre Webseite festzulegen, müssen Sie den body-Tag mit CSS gestalten. Schreiben Sie dazu in die geöffnete Datei folgende Zeile:
body { background: url('PFAD'); }
und ersetzen Sie die Stelle "PFAD" mit dem jeweiligen Pfad zu dem gewünschten Bild. Sollte also zum Beispiel das betreffende Bild "hintergrundbild.jpg" auf Ihrem Webserver im Ordner "Bilder" liegen, müssen Sie "bilder/hintergrundbild.jpg" eingeben. Sie können auch den absoluten Pfad zu einer Bilddatei (http://www.webseite.de/bilder/hintergrundbild.jpg) verwenden, um einerseits keinen Fehler beim relativen Pfad zu machen oder anderseits auch ein externes Bild zu nutzen. - Wenn Sie diesen Text eingebeben haben, wird das angegebene Bild mit der entsprechenden Größe als Hintergrund dargestellt. Sie können die Darstellung noch weiterbearbeiten, indem Sie zum Beispiel für den Bereich, der nicht von dem Bild erfasst wird, eine Hintergrundfarbe angeben. Dafür müssen sie vor "url…" die Farbe als Hex-Wert angeben, also zum Beispiel für Schwarz: "background: #000 url…".
- Sie können zudem noch festlegen, ob - und wenn ja - wie oft ein Hintergrundbild wiederholt werden soll, wenn es den Bildschirm nicht vollständig ausfüllen sollte. Dazu müssen Sie nach "url" entweder "no-repeat" für keine Wiederholung, "repeat-x" für eine horizontale bzw. "repeat-y" für eine vertikale Wiederholung schreiben. Zudem können Sie mit "repeat" festlegen, dass das Bild sowohl vertikal als auch horizontal wiederholt werden soll.
- Der vollständige Code könnte damit zum Beispiel wie folgt aussehen:
body { background: #FFF url(' bilder/hintergrundbild.jpg‘) repeat; } - Öffnen Sie nun die HTML-Datei, in der Sie das Hintergrundbild einfügen wollen.
- Schreiben Sie im head-Bereich den Code "<style></style>" und kopieren Sie den erstellten CSS-Code zwischen die beiden Tags. Alternativ können Sie den body-Tag ersetzen, indem Sie statt "<body>" den Code
"<body style="background: #FFF url(' bilder/hintergrundbild.jpg‘) repeat;">"
verwenden. - Speichern Sie nun die Datei ab und laden Sie diese auf Ihren Webserver hoch.
Wenn Sie nun die Datei auf Ihrem Webserver aufrufen, wird der bisherige Hintergrund mit dem ausgewählten Bild ersetzt.
Weiterlesen:
Wie hilfreich finden Sie diesen Artikel?
