So fügen Sie einer Website einen Hintergrund hinzu: 14 Schritte (mit Bildern)

Inhaltsverzeichnis:

So fügen Sie einer Website einen Hintergrund hinzu: 14 Schritte (mit Bildern)
So fügen Sie einer Website einen Hintergrund hinzu: 14 Schritte (mit Bildern)

Video: So fügen Sie einer Website einen Hintergrund hinzu: 14 Schritte (mit Bildern)

Video: So fügen Sie einer Website einen Hintergrund hinzu: 14 Schritte (mit Bildern)
Video: E-Mail Adresse in Outlook auf dem Handy einrichten | So einfach geht das 2024, Kann
Anonim

Der Hintergrund ist eines der wichtigsten Elemente einer Website. Ein guter Hintergrund gibt der Website den Ton an und ergänzt den Inhalt. Es gibt viele verschiedene Möglichkeiten, einen Hintergrund hinzuzufügen, jede mit einem anderen Zweck. Bei einigen Methoden können Sie den Hintergrund auf alle Seiten einer Website anwenden, während andere den Hintergrund nur auf eine bestimmte Seite beschränken. In diesem Artikel erfahren Sie, wie Sie Ihrer Website mithilfe von HTML oder CSS einen Hintergrund hinzufügen.

Schritte

Methode 1 von 2: HTML-Methoden

Einfarbiger Hintergrund

Hinzufügen eines Hintergrunds zu einer Website Schritt 1
Hinzufügen eines Hintergrunds zu einer Website Schritt 1

Schritt 1. Ein einfarbiger Hintergrund ist die einfachste Art von Hintergrund, den Sie auf einer Website platzieren können

Tatsächlich beginnt jede Website mit einem standardmäßigen weißen Hintergrund. Während jedoch ein weißer Hintergrund in Verbindung mit einem harmonischen Farbschema sehr glatt und sauber aussehen kann, kann ein andersfarbiger Hintergrund bei verschiedenen Themen bevorzugt werden.

Hinzufügen eines Hintergrunds zu einer Website Schritt 2
Hinzufügen eines Hintergrunds zu einer Website Schritt 2

Schritt 2. Öffnen Sie Ihren Webcode (Quelle)

Hinzufügen eines Hintergrunds zu einer Website Schritt 3
Hinzufügen eines Hintergrunds zu einer Website Schritt 3

Schritt 3. Fügen Sie im body-Tag ein Attribut namens bgcolor hinzu

Nun sollte Ihr Body-Tag so aussehen:

wobei COLORNAME der Name der Farbe ist. COLORNAME kann mit vielen Arten von Farbrepräsentanten gefüllt werden-

  • (Farbname)
  • (Hex-Wert)
  • (RGB-Wert)
Hinzufügen eines Hintergrunds zu einer Website Schritt 4
Hinzufügen eines Hintergrunds zu einer Website Schritt 4

Schritt 4. Das Experimentieren mit RGB und # kann zu vielen Schattierungen führen, aber Sie können den einfachen ersten Weg nehmen

Denken Sie jedoch daran, dass die Eingabe einer ungewöhnlichen Farbe wie "Ultramarinblaues Grün" zu Weiß führt.

Hintergrundbild hinzufügen

Das Hinzufügen eines Hintergrundbildes ist etwas komplizierter als ein einfarbiger Hintergrund

Hinzufügen eines Hintergrunds zu einer Website Schritt 5
Hinzufügen eines Hintergrunds zu einer Website Schritt 5

Schritt 1. Fügen Sie die background-Eigenschaft zum body-Tag hinzu, damit es so aussieht:

wobei SRC die Quelle des Bildes ist SRC kann sich im selben Ordner oder einem anderen Ordner/einer anderen Webseite befinden.

  • (im gleichen Ordner)
  • (in einem anderen Ordner)
  • (auf einer anderen Seite)
Hinzufügen eines Hintergrunds zu einer Website Schritt 6
Hinzufügen eines Hintergrunds zu einer Website Schritt 6

Schritt 2. Denken Sie daran, die Erweiterung.gif/-j.webp" />

Methode 2 von 2: CSS-Methoden

Hinzufügen eines Hintergrunds zu einer Website Schritt 6
Hinzufügen eines Hintergrunds zu einer Website Schritt 6

Einfarbiger Hintergrund

Hinzufügen eines Hintergrunds zu einer Website Schritt 7
Hinzufügen eines Hintergrunds zu einer Website Schritt 7

Schritt 1. Um einen einfarbigen Hintergrund in CSS hinzuzufügen, fügen Sie ein Stilattribut hinzu

Sie können auch IDs und Klassen vergeben und sowohl externe als auch interne Stylesheets verwenden.

Hinzufügen eines Hintergrunds zu einer Website Schritt 8
Hinzufügen eines Hintergrunds zu einer Website Schritt 8

Schritt 2. Ihr Body-Tag sollte so aussehen:

wobei der COLORNAME der Name der Farbe, Hex-Wert oder RGB ist (Erinnern Sie sich auch an die letzten Schritte des einfarbigen Hintergrunds in HTML, die auch hier gelten).

Ein Bild hinzufügen

Hinzufügen eines Hintergrunds zu einer Website Schritt 9
Hinzufügen eines Hintergrunds zu einer Website Schritt 9

Schritt 1. Um ein Bild hinzuzufügen, fügen Sie das style-Attribut zum body-Tag hinzu

Sie können auch IDs und Klassen vergeben und sowohl externe als auch interne Stylesheets verwenden.

Hinzufügen eines Hintergrunds zu einer Website Schritt 10
Hinzufügen eines Hintergrunds zu einer Website Schritt 10

Schritt 2. Ihr Body-Tag sollte jetzt so aussehen:

Hinzufügen eines Hintergrunds zu einer Website Schritt 11
Hinzufügen eines Hintergrunds zu einer Website Schritt 11

Schritt 3. Denken Sie daran, dass SRC die Quelle ist

Es kann aus demselben Ordner, einem anderen Ordner oder einer anderen Webseite stammen.

  • (im gleichen Ordner)
  • (in einem anderen Ordner)
  • (auf einer anderen Seite).
Hinzufügen eines Hintergrunds zu einer Website Schritt 12
Hinzufügen eines Hintergrunds zu einer Website Schritt 12

Schritt 4. Denken Sie daran, auch die Erweiterungen hinzuzufügen

Sich wiederholender gemusterter Hintergrund

Hinzufügen eines Hintergrunds zu einer Website Schritt 13
Hinzufügen eines Hintergrunds zu einer Website Schritt 13

Schritt 1. Um einen Hintergrund mit wiederholtem Muster zu erstellen, fügen Sie einen Hintergrund wie in den obigen Schritten beschrieben hinzu

Ihr Body-Tag muss jetzt geändert werden in-

Wobei REPEAT-SETTINGS die Einstellungen sind. Es kann viele Wiederholungseinstellungen geben, wie z.

  • (Der Hintergrund wird sowohl vertikal als auch horizontal wiederholt.)
  • (Der Hintergrund wird horizontal wiederholt.)
  • (Der Hintergrund wird vertikal wiederholt.)

Fester Bildhintergrund

Hinzufügen eines Hintergrunds zu einer Website Schritt 14
Hinzufügen eines Hintergrunds zu einer Website Schritt 14

Schritt 1. Feste Bildhintergründe sehen cool aus und ändern sich nicht, wenn Sie nach unten scrollen

Dazu müssen Sie nur einige einfache Änderungen am Code im obigen Abschnitt vornehmen. Nehmen Sie die Anpassungen vor, damit das Body-Tag so aussieht-

wobei SRC die Quelle des Hintergrundbildes ist, POSITION ist die Position des Bildes (es kann von der Mitte bis oben rechts reichen); background-attachment ist der wichtigste "Katalysator" dieses Hintergrundtyps. Es wird verwendet, um die Position des Hintergrunds anzugeben, und es wird empfohlen, es nicht zu ändern.

Empfohlen: