1.)
Grundsätzlich führt obiges CSS zum gewünschtne Ergebnis. Allerdings ist es so, dass der schwarze Balken nicht nur einmal erscheint sondern dann wenn man nach unten scrollt immer wieder. Wie kann ich erreichen, dass der schwarze Balken nur einmal erscheint?
background-repeat: no-repeat;
2.)
Unterhalb des Balkens soll zusätzlich noch eine Hintergrundgrafik eingefügt werden. Ist dass unter der Bedingung, das ich Gradienten verwende, überhaupt noch möglich? Falls ja, wie?
Ja, indem man die verschiedenen Hintergrundbilder per Komma voneinander trennt: background-image: linear-gradient(…), url(…);
Beachte hierbei, dass alle Hintergrundeigenschaften für dein erstes Bild auch für alle anderen Bilder gelten, sofern du nicht explizit etwas anderes angibst.
Soll sich das zweite Bild beispielsweise horizontal wiederholen, musst du dies innerhalb von background-repeat ebenfalls per Komma getrennt angeben: background-repeat: no-repeat, repeat-x;
3.)
Am liebsten wäre mir, wenn der schwarze Balken einen gesprengelten Verlauf hätte. Früher hab ich das immer so gelöst, dass ich eine Grafik die das gewünschte Muster hat von links nacht rechts gekachelt habe. Ist so ein gesprengeltes Muster mit Hilfe von Gradienten überhaupt umsetzbar? Falls ja, wie?
Ja, wahrscheinlich..