Wie man eine GIF-Datei als Hintergrundbild haben

March 16

Eine GIF-Datei enthält ein Bild für die Verwendung im Internet komprimiert. Einige GIF-Bilder sind animiert und werden automatisch abgespielt, wenn Sie in eine Webseite eingebettet. Ein GIF-Bild kann als Hintergrundbild auf einer Webseite verwendet werden. Sie können ihre Fliesen, Platzierung und Scroll-Verhalten auf der Webseite mit Inline-CSS-Code in ein normales HTML-Dokument steuern.

Anweisungen

1 Platzieren Sie den folgenden Code zwischen den < Head >-Tags Ihres HTML-Dokuments, ersetzen "Datei/Bilder. "GIF" durch den Pfad der GIF-Datei:

< Typ style = "Text/Css" >

Körper

{

Hintergrund-Bild: URL("IMAGES/FILE. "GIF");

}

< / style >

2 Fügen Sie die folgende Zeile unter der Zeile "Background-Image", das Fliesen-Verhalten des Hintergrundbildes zu entfernen:

Hintergrund-Repeat: No-repeat;

Verwenden Sie "Repeat-X" oder "Repeat-y" anstelle von "No-Repeat", um das Bild horizontal oder vertikal, bzw. zu wiederholen.

3 Verwenden Sie den folgenden Code, um das GIF in der Mitte der Hintergrund der Seite zu platzieren:

Hintergrund-Lage: Mitte-Mitte;

Verwenden Sie "Links oben", "linke Mitte", "Links unten", "rechts oben", "richtige Mitte", "rechts unten", "Mitte oben" oder "unten Mitte", das Bild an den Rändern oder in den Ecken der Seite zu platzieren. Verwenden Sie Pixelkoordinaten oder Prozentsätze, um das Bild beliebig platzieren. Diese Zeile wird beispielsweise die 100 Bildpixel vom oberen Rand der Seite bündig mit der linken Seite platzieren:

Background-Position: 0px 100px;

Die Positionierung Typen können auch untereinander gemischt werden. Beispielsweise die folgende Zeile wird das Bild horizontal zentrieren eines Drittels der Seitenhöhe von oben:

Hintergrund-Lage: Zentrum 33 %;

4 Ändern Sie das Scrollverhalten des GIF mit der Eigenschaft "Background-Attachment". Es ist nur eine Option für diese Eigenschaft; Verwenden Sie diese Zeile, um dazu führen, dass das Hintergrundbild, um im Platz zu bleiben, wenn die Seite Erstellen eines interessanten visuellen Effekts gescrollt ist:

Background-Attachment: fixed;

5 Experimentieren Sie mit verschiedenen Kombinationen von Eigenschaften, die oben abgebildet, um die Auswirkungen auf das Hintergrundbild der Seite vollständig zu begreifen.