Cascading Style Sheets (CSS) Level 3, auch als CSS3 bekannt, bietet Unterstützung für mehrere Hintergrundbilder. Sie können mehrere Hintergrundbilder auflisten, die jeweils durch ein Komma getrennt sind, und mithilfe von Hintergrundeigenschaften wie "Hintergrundposition" und "Hintergrundwiederholung" festlegen, wie sie angezeigt werden. Solange jeder Wertesatz der Reihenfolge der Bild-URLs entspricht, erzielen diese Eigenschaften die beabsichtigten Effekte. Sie können auch "Hintergrundanhang" verwenden, um einen Hintergrund auf dem Bildschirm festzulegen, wenn Benutzer nach oben oder unten scrollen.
1
Öffnen Sie Ihre Webseite im Editor oder in einem Code-Editor, um den Code anzuzeigen. Suchen Sie nach dem HTML-Element, auf das Sie die mehreren festen Hintergründe anwenden möchten, und suchen Sie den ID-Namen:
Inhalt...2
Scrollen Sie zum Anfang des Codes und suchen Sie das "" -Tag, das auf Ihr Stylesheet verweist:
Suchen Sie den Namen des Stylesheets, das Sie bearbeiten möchten, im "href"-Attribut des ""-Tags. Wenn Ihr Code mehrere ""-Tags enthält, suchen Sie nach dem, der auf Ihr allgemeines Stylesheet verweist, und nicht nach Dateien mit Namen wie "print" oder "IE".
3
Öffnen Sie das Stylesheet im Editor oder in Ihrem Code-Editor. Suchen Sie im Code nach dem ID-Namen Ihres HTML-Elements. Fügen Sie diesen Selektor am Ende Ihres Codes hinzu, wenn Sie ihn nicht finden:
}
4
Legen Sie die Eigenschaft "Hintergrundbild" zwischen den geschweiften Klammern nach Ihrer Auswahl fest:
Hintergrundbild: URL(Pfad/zu/erste-bg.png), URL(Pfad/zu/zweite-bg.png);
}
Trennen Sie jede URL durch ein Komma, um mehrere Hintergrundbilder aufzulisten. Legen Sie den Pfad in den einzelnen Klammern auf die URL eines Hintergrundbilds fest, das Sie verwenden möchten.
5
Beginnen Sie unter "background-image" eine Leerzeile und fügen Sie die Eigenschaft "background-position" hinzu:
Hintergrundposition: oben links, 100px 200px;
Legen Sie die Position jedes Hintergrunds in der gleichen Reihenfolge fest, in der sie in der URL-Liste "Hintergrundbild" angezeigt werden. Im obigen Beispiel wird "first-bg.png" so eingestellt, dass es in der oberen linken Ecke des HTML-Elements angezeigt wird. Das "second-bg.png" zeigt dann 100 Pixel von oben und 200 Pixel vom linken Rand des HTML-Elements entfernt an. Sie können auch Prozentwerte wie "80% 20%" verwenden.
6
Setzen Sie "Hintergrundanhang" unter die Eigenschaft "Hintergrundposition":
Hintergrundanhang: fixiert, scrollen;
Verwenden Sie "fest", wenn ein Hintergrundbild auf dem Bildschirm angezeigt werden soll, auch wenn der Benutzer auf der Webseite nach oben oder unten scrollt. Die Standardeinstellung ist "Bildlauf".
7
Fügen Sie unter "background-attachment" eine neue Zeile hinzu und fügen Sie die Eigenschaft "background-repeat" hinzu. Setzen Sie diese Eigenschaft für jedes Hintergrundbild, das Sie nicht kacheln möchten, auf "no-repeat":
Hintergrundwiederholung: keine Wiederholung, Wiederholung-x;
Verwenden Sie "repeat-x" oder "repeat-y", um ein Bild entlang der "Y"- (vertikal) oder "X"-(horizontalen) Achse eines HTML-Elements zu wiederholen.
