Henry: einige Fragen zu Gradienten

Hallo,

ich habe den Body-Bereich meiner Webseite mit einem schwarzen Balken im oberen Bereich der Webseite versehen, der Balken verläuft von links nach rechts und hat KEINEN Verlauf. Dies habe ich mit Hilfe von Gradienten gelöst. Sieht ungefähr so aus:

background-image: linear-gradient(180deg, white 220px, black 220px, black 400px, white 400px);

Hierzu einige Fragen:

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?

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?

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?

  1. @@Henry:

    nuqneH

    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.

    Kann ich nicht nachvollziehen. background-repeat.

    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. Multiple Hintergründe, background-position.

    Ist so ein gesprengeltes Muster mit Hilfe von Gradienten überhaupt umsetzbar?

    Hängt vom Muster ab. Aber vielleicht ist eine Grafik doch Mittel der Wahl. Und SVG das Grafikformat der Wahl.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hängt vom Muster ab. Aber vielleicht ist eine Grafik doch Mittel der Wahl. Und SVG das Grafikformat der Wahl.

      Bei welchem Muster würde es denn mit Gradienten funktionieren? Kannst du mir hier vielleicht ein kleines Beispiel geben?

      1. @@Henry:

        nuqneH

        Bei welchem Muster würde es denn mit Gradienten funktionieren? Kannst du mir hier vielleicht ein kleines Beispiel geben?

        Bei vielen. Lea Verou kann.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Bei vielen. Lea Verou kann.

          Ich brauche aber was in lila?

          Kann ich die die du mir geschickt hast modifizieren?

          Sorry ich steh voll auf dem Schlauch :-(

          1. @@Henry:

            nuqneH

            Ich brauche aber was in lila?
            Kann ich die die du mir geschickt hast modifizieren?

            Gern. Das geht aber über die unentgeltliche Hilfe hier im Forum hinaus.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. 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..

    1. 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;

      Beim zweiten Hintergrund handelt es ich nicht um einen Balken der per Gradient generiert wird, sondern um eine echte Grafik. Diese Grafik soll genau unterhalb des Gradient Balkens platziert werden. Nun muss ich ja irgendwie die Y-Position angeben, ab welcher die zweite Grafik platziert werden muss. Wo kann ich das den angeben? Kannst du mir hier vielleicht ein kleines Code-Beispiel geben?

      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..

      Was meinst du mit "Ja, wahrscheinlich.."? Kannst du mir hier ein kleines Beispiel geben?

      1. Beim zweiten Hintergrund handelt es ich nicht um einen Balken der per Gradient generiert wird, sondern um eine echte Grafik. Diese Grafik soll genau unterhalb des Gradient Balkens platziert werden. Nun muss ich ja irgendwie die Y-Position angeben, ab welcher die zweite Grafik platziert werden muss. Wo kann ich das den angeben? Kannst du mir hier vielleicht ein kleines Code-Beispiel geben?

        Im ersten Antwortposting von Gunnar Bittersmann wurdest du bereits auf background-position hingewiesen.
        Die ersten Werte vor dem Komma beziehen sich hier wieder auf den ersten Hintergrund (ob CSS Gradient oder „echte“ Grafik spielt keine Rolle), die zweiten Werte auf den Zweiten usw.
        Das Ganze kann man auch in die background-Kurzschreibweise packen, was mir persönlich mehr zusagt: background: linear-gradient() no-repeat, url() 23px 42px;
        Lässt man in der Kurzschreibweise einen Wert weg, erhält die entsprechende Eigenschaft – anstelle des für den ersten Hintergrund definierten Wertes – automatisch ihren Initialwert.

        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..

        Was meinst du mit "Ja, wahrscheinlich.."? Kannst du mir hier ein kleines Beispiel geben?

        Ich kann nur raten, was du unter einem „gesprengelten“ Muster verstehst.
        Anregungen, wie man so etwas machen kann, hast du ja genug bekommen.