Festlegen des GIF „ Grafikaustauschformat „als Hintergrundbild fügt dem Design ein optisch ansprechendes Element hinzu. GIF ermöglicht es Entwicklern, Informationen zu übermitteln oder ein Produkt oder eine Dienstleistung hervorzuheben, was bei der Schaffung der visuellen Identität einer Marke hilft. Allerdings müssen die Entwickler sicherstellen, dass die Verwendung von GIFs die Webseite nicht überfordert oder den Benutzer vom Hauptinhalt ablenkt.

In diesem Artikel wird die Vorgehensweise zum Festlegen eines GIF als Hintergrundbild auf der Webseite veranschaulicht.

Wie legt man GIF als Hintergrundbild auf der Webseite fest?

Das Festlegen eines GIF als Hintergrundbild hilft bei der Erstellung auffälliger Elemente durch das Hinzufügen visueller Elemente.

GIFs sind besonders nützlich auf Websites, die ein Gefühl von Verspieltheit oder Skurrilität vermitteln möchten, oder auf Seiten, die ein bestimmtes Produkt oder eine bestimmte Funktion hervorheben möchten. Um es als Hintergrundbild festzulegen, sehen Sie sich die folgenden Beispiele an:

Beispiel 1: GIF als festen Hintergrund festlegen

Da die HTML-Elemente, die beim Aufbau des Inhalts der Webseite helfen, innerhalb der „ ' Schild. Aus diesem Grund ist die Auswahl von „ Körper ”-Element und Anwenden von CSS-Eigenschaften darauf. Es betrifft alle enthaltenen HTML-Elemente des „ ' Schild.

Zum Beispiel das „

' Und '

„Tags werden als Inhalt der Webseite verwendet. Sehen Sie sich den folgenden Codeausschnitt an:

< Körper >
< h1 > GIF einstellen als ein Hintergrundbild auf der Seite h1 >
< P > Dieses GIF wurde hinzugefügt als ein Hintergrundbild auf der gesamten Seite verwenden 'Hintergrundbild' Eigentum. Dieser Artikel wurde von Linuxhint bereitgestellt. P >
Körper >

Wählen Sie nun das HTML-Element „body“ innerhalb des „ ”-Tag oder in einem separaten „ CSS ”-Datei, um das Styling auf der Webseite anzuwenden:

Körper {
Hintergrundbild: URL ( 'sea.gif' ) ;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Polsterung:50px;
Schriftgröße: x-groß;
Farbe weiß;
}

Im obigen Codeblock:

• • Zuerst die ' URL() Es wird eine Methode verwendet, die den Pfad des „ GIF ' Datei. Und diese Methode wird als Wert an das CSS übergeben „ Hintergrundbild ' Eigentum.
  • Als nächstes stellen Sie „ keine Wiederholung ” als Wert für das CSS „ Hintergrund Wiederholung ”-Eigenschaft für die Wiederholung der GIF-Datei.
  • Legen Sie dann den Wert „ Abdeckung „zum CSS“ Hintergrundgröße „Eigenschaft, um den gesamten verfügbaren Raum abzudecken
  • Geben Sie anschließend den Wert „ 50px ' Und ' x-groß „zum CSS“ Polsterung ' Und ' Schriftgröße ” Eigenschaften bzw. Dadurch werden Abstände um den Text herum hinzugefügt und die Schriftgröße vergrößert.

Nach der Kompilierung sieht die Webseite so aus:

Die obige Ausgabe zeigt, dass der Webseite ein GIF als Hintergrund hinzugefügt wurde.

Beispiel 2: GIF als scrollbaren Hintergrund festlegen

Erstellen Sie zunächst eine HTML-Struktur, um einen Webseiteninhalt wie folgt zu erstellen:

< div Klasse = „enthalten“ >
< h1 > GIF einstellen als ein Hintergrundbild auf der Seite h1 >
< P > Dieses GIF wurde hinzugefügt als ein Hintergrundbild auf der gesamten Seite mit dem 'Hintergrundbild' Eigentum. Dieser Artikel wurde von Linuxhint bereitgestellt. P >
div >

< div >
< h3 Stil = 'Farbe weiß;' > Inhalte, die außerhalb der geschrieben wurden „div“ Element h3 >
div >

Im obigen Code:

• • Erstens, der Elternteil „
    Das Tag „“ wird mit der Klasse „“ verwendet. enthalten “.
  • Als nächstes verwenden Sie „ h1 ' Und ' P ” HTML-Elemente und stellen ihnen Dummy-Inhalte zur Verfügung.
  • Erstellen Sie danach ein weiteres „
    “ und nutzen Sie die „

    ”-Tag durch Bereitstellung von Dummy-Daten.

Fügen Sie nun GIF als Hintergrund auf der Webseite hinzu, indem Sie die folgenden CSS-Eigenschaften einfügen:

.contai {
Hintergrundbild: URL ( meer.gif ');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Höhe: 100 Vh;
Anzeige: Flex;
align-items: center;
rechtfertigen-Inhalt: Mitte;
Flexrichtung: Spalte;
Farbe weiß;
Schriftgröße: groß;
Textausrichtung: Mitte;
Polsterung: 2rem;
}

Die Beschreibung des oben verwendeten Codeblocks:

• • Stellen Sie zunächst „ Bildpfad “, „ keine Wiederholung t“ und „ Abdeckung ” als Wert für das CSS „ Hintergrundbild “, „ Hintergrund Wiederholung ' Und ' Hintergrundgröße ” Eigenschaften bzw.
  • Als nächstes legen Sie den Wert „ 100 Vh ' Und ' biegen „zum CSS“ Höhe ' Und ' Anzeige ' Eigenschaften.
  • Danach nutzen Sie das CSS „ Farbe “, „ Schriftgröße “, „ Textausrichtung ' Und ' Polsterung ”-Eigenschaften, um Stile auf den Inhalt anzuwenden.

Nach Abschluss des Kompilierungsvorgangs sieht die Webseite folgendermaßen aus:

Die Ausgabe zeigt an, dass „ GIF ” wurde als Hintergrundbild auf der gesamten Seite eingefügt.

Abschluss

Um GIF als Hintergrundbild auf der Webseite festzulegen, muss das CSS „ Hintergrundbild „Eigenschaft wird im HTML verwendet“ Körper ' Element. Die CSS-Eigenschaft, die auf das „body“-Element angewendet wird, wird automatisch auf alle enthaltenden Elemente angewendet. Durch die Einstellung „ 100 Vh Als Wert für die Eigenschaft height kann auch der Scrolleffekt aktiviert werden. Dadurch kann sich das Hintergrund-GIF entlang der Schriftrolle bewegen. In diesem Artikel wurde gezeigt, wie Sie ein GIF als Hintergrundbild auf der Webseite festlegen.