Ein Hintergrund Bild in HTML einfügen

Wenn du ein Bild auf einer Webseite einfügen musst, ist alles, was du brauchst: HTML. Wenn du ein Bild als Hintergrund für eine Webseite einstellen möchtest, musst du HTML und CSS einsetzen. HTML steht für Hypertext Markup Language. Der HTML-Code gibt dem Browser an, was er auf einer Webseite anzeigen soll.^{[1]XForschungsquelle} CSS steht für Cascading Style Sheets und hiermit wird das Aussehen und Layout einer Webseite geändert.^{[2]XForschungsquelle} Du brauchst ein Bild, das du als Hintergrund für deine Webseite nutzen möchtest.

Teil 1

Teil 1 von 4:

Deine Dateien einrichten

PDF herunterladen

1
Erstelle auf deinem Computer einen Ordner für deine HTML-Datei und das Hintergrundbild. Der Name des Ordners sollte den Inhalt beschreiben, so dass du ihn später leicht wieder finden kannst.
- Du kannst dem Ordner einen beliebigen Namen geben, aber wenn du mit HTML arbeitest, benennst du die Dateien und Ordner am besten mit kurzen, einfachen Wörtern, die du dem Inhalt zuordnen kannst.
2
Lege das Hintergrundbild im HTML-Ordner ab. Speichere das Bild, das du als Hintergrund verwenden möchtest, im HTML-Ordner.
- Wenn du dir nicht zu viele Gedanken darum machst sicherzustellen, dass deine Webseite auf älteren Geräten mit einer langsamen Internetverbindung gut läuft, solltest du mit einem hochauflösenden Bild als Hintergrund auf der sicheren Seite sein. Einfache Bilder mit hellen, sich wiederholenden Mustern, damit du den Text darauf gut lesen kannst, sind ebenfalls eine gute Wahl für einen Hintergrund.
- Wenn du kein Bild hast, kannst du ein kostenloses Hintergrundbild herunterladen. Wenn du ein Bild herunterlädst, lege es im erstellten HTML-Ordner ab.
3
Öffne einen Text- oder HTML-Editor. Du kannst eine HTML-Datei mit einem einfachen Texteditor wie bspw. NotePad (Windows) oder TextEdit (Mac) erstellen. Du kannst auch einen WYSIWYG (What You See Is What You Get) HTML-Editor wie Adobe Dreamweaver nutzen.
- Wenn du einen WYSIWYG-Editor nutzt, dann klicke auf die Option zum Öffnen einer neuen HTML-Datei auf der Startseite.
Klicke auf einem PC im Dropdown-Menü auf Speichern als und auf einem Mac auf Speichern.
Im Allgemeinen wird die erste Seite einer Webseite "index" genannt, aber du kannst ihr einen beliebigen Namen geben. Tippe den Namen der Datei in das Textfeld "Dateiname" ein.
7
Ändere den Dateityp auf ein HTML-Dokument. Wenn du einen WYSIWYG-Editor nutzt, musst du die Datei nur speichern. Wenn du NotePad oder TextEdit nutzt, dann gehe so vor, um die Datei im HTML-Format zu speichern.
- Notepad: Ersetze die Dateiendung ".txt" am Ende des Dateinamens durch ".html".
- TextEdit: Wähle im Dropdown-Menü "Dateiformat" die Option Webseite (.html).
8
Klicke unten rechts im Fenster auf Speichern. Das Textdokument wird jetzt als HTML-Dokument gespeichert.
Werbeanzeige

Teil 2

Teil 2 von 4:

Die HTML-Datei schreiben

PDF herunterladen

HTML-Code besteht aus öffnenden und schließenden Tags. Jede gut geschriebene HTML-Seite sollte mit <!DOCTYPE html> beginnen. Dies gibt dem Browser an, dass es sich bei diesem Dokument um eine HTML-Datei handelt.
Dies ist der öffnende Tag deines HTML-Codes, er gibt dem Browser an, dass dein HTML-Code hier beginnt.
Dies ist der öffnende Tag für den Header des HTML-Dokuments. Der Header enthält Metadaten, die nicht im Browser angezeigt werden. Dieser enthält Informationen wie den Seitentitel, aber auch die Cascading Style Sheets (CSS), welche die Darstellung des HTML-Codes bestimmen.
Dies ist der HTML-Code, der den Titel deiner Webseite enthält. Der "<title>" Tag ist der öffnende Tag des Seitentitels der HTML-Seite. Der Tag "</title>" ist der schließende Tag. Ersetze den Text "Seitentitel" durch einen beliebigen Titel für deine HTML-Seite. Dieser Text wird oben im Browser im Browser-Tab angezeigt.
Dies ist der Tag, der den Header deines HTML-Dokuments schließt. Wenn du andere Daten oder Style Sheets für dein HTML-Dokument mit aufnehmen möchtest, dann schreibe sie nach dem öffnenden "<head>" Tag und vor dem schließenden "</head>" Tag.
Dies ist der öffnende Tag für den Body deines HTML-Dokuments. In den Body kommen alle visuellen Elemente deiner Webseite. Dazu gehören Text, Bilder, Buttons und andere Elemente, die auf der Seite zu sehen sind.
7
Tippe in die nächste Zeile <div style="background-image:url('[image url]');">. Dies ist der HTML-Tag zum Einfügen des Hintergrundbilds auf deiner Webseite. Ersetze "[image url]" durch die aktuelle URL des gewünschten Bilds. Dies kann ein Bild auf einem Server im Internet sein oder eines, das du lokal auf deinem Computer abgelegt hast.^{[3]XForschungsquelle}
- Alternativ kannst du CSS nutzen, um ein Hintergrundbild einzurichten.
- Wenn du einen Dateinamen ohne Dateipfad oder URL angibst (bspw. background-image: url("background.png");), sucht der Browser im Ordner der Webseite nach der angegebenen Datei. Wenn sich die Datei in einem anderen Ordner in deinem Dateisystem befindet, musst du den kompletten Pfad auf die Datei angeben.
Wenn du ein anderes HTML-Element auf deiner Webseite haben möchtest, bspw. Text, Bilder, Videos, Links, Buttons etc., dann gib sie im "Body" Bereich des HTML-Dokuments an.
Dieser Tag schließt den Body deines HTML-Dokuments. Wenn du mit dem Hinzufügen aller HTML-Elemente, die du auf deiner Seite haben möchtest, fertig bist, dann tippe diesen Tag in die letzte Zeile.
Dies ist der Tag, mit dem das gesamte HTML-Dokument abgeschlossen wird. Tippe diesen Tag in die letzte Zeile ein.
11
Speichere die HTML-Datei. Wenn du mit allem fertig bist, klicke zum Speichern deiner Arbeit auf Datei und dann auf Speichern. Das gesamte HTML-Dokument sollte etwa so aussehen:
Werbeanzeige

Teil 3

Teil 3 von 4:

Mit CSS

PDF herunterladen

Verwende die in Methode 2 beschriebenen Schritte, um ein HTML-Dokument zu schreiben. Dein HTML-Dokument sollte einen öffnenden und schließenden HTML-Tag, einen öffnenden und schließenden Header-Tag und einen öffnenden und schließenden Body-Tag enthalten. Du musst nicht den HTML-Tag zum Einfügen eines Hintergrundbilds hinzufügen. In diesem Teil zeigen wir dir, wie du ein Hintergrundbild mit CSS anstelle von HTML einrichtest.
2
Tippe <style> in den Header des HTML-Dokuments. Dies ist der öffnende Tag für Cascading Style Sheets (CSS). Dieser Tag kommt oft nach dem "<head>" Tag und vor dem "</head>" Tag.
- Alternativ kannst du deine CSS in einer separaten CSS-Datei erstellen und sie mit deinem HTML-Dokument verknüpfen.
Dies ist die Eröffnung des CSS-Codes, der den Body deines HMTL-Dokuments formatiert.
4
Tippe in die nächste Zeile background-image: url('[image url]'); ein. Diese Zeile gibt das zu verwendende Hintergrundbild an. Ersetze den Text "[image url]" durch die URL des Bilds, das du als Hintergrund haben möchtest.
- Wenn du einen Dateinamen ohne Dateipfad oder URL angibst (bspw. background-image: url("background.png");), sucht der Browser im Ordner der Webseite nach dem angegebenen Bild. Wenn sich die Datei in einem anderen Ordner in deinem Dateisystem befindet, musst du den vollen Pfad auf die Datei angeben.
Diese Zeile gibt dem Browser an, dass das Bild einmal angezeigt werden soll, statt immer wieder wiederholt zu werden.
Diese gibt dem Browser an, dass der komplette Hintergrund mit dem Bild bedeckt werden soll.
Wenn du andere CSS-Zeilen mit aufnehmen möchtest, die den Body deines HTML-Dokuments betreffen, dann gib sie jetzt an. Tippe "}" in die letzte Zeile des "Body"-Bereichs deines CSS-Codes ein, um den Body zu schließen.
Wenn du alles an CSS eingegeben hast, was du angeben wolltest, dann tippe am Ende "</style>" ein. Dieser Tag schließt dein CSS.

How.com.vn Deutsch: Step 9 Speichere die HTML-Datei.

Wenn du mit allem fertig bist, klicke zum Speichern deiner Arbeit auf Datei und dann auf Speichern. Das gesamte HTML-Dokument sollte etwa so aussehen:

<!DOCTYPE html><html><head><title>Seitentitel</title><style>body {background-image: url("https://www.website.com/images/image_background.jpg");        background-repeat:no-repeat;       background-size:cover;} </style></head><body></body></html>

Werbeanzeige

Teil 4

Teil 4 von 4:

Die HTML-Datei überprüfen

PDF herunterladen

Dies blendet ein Pop-up mit einem Kontextmenü rechts daneben ein.
Dies zeigt eine Reihe Apps an, mit denen du die HTML-Datei öffnen kannst.
Du kannst die HTML-Datei in jedem Browser öffnen.
4
Überprüfe die HTML-Datei. Wirf einen Blick auf die Seite und vergewissere dich, dass alles richtig aussieht.
- Wenn sich der Browser öffnet und du das Bild nicht siehst, dann vergewissere dich im Editor, dass der Dateiname in der index.html richtig geschrieben ist.
- Wenn sich der Browser öffnet und du anstelle des Hintergrundbilds HTML-Code siehst, kann es sein, dass die HTML-Datei als .txt oder .rtf Datei gespeichert wurde, statt als HTML-Dokument. Versuche es mit dem Bearbeiten der HTML-Datei in einem anderen Texteditor.
Bringe den Cursor im Editor zwischen die Tags <body> und </body> und tippe dann Hello world! ein. Lade die Seite im Browser neu, um den Text auf dem Hintergrundbild zu sehen.
Werbeanzeige