Tian Kruse: Wiederholende Grafik unten mit weiterer Grafik dahinter

Hallo,

ich versuche gerade auf einer Webseite eine Grafik einzubinden, die möglichst immer am unteren Ende des Browsers sein sollte, und sich horizontal wiederholt.

Dann möchte ich hinter dieser Grafik eine weitere Grafik packen (es ist ein Baum, der hinter halbtransparentem Gras liegt), die immer am linken Rand des Browsers liegt.
Dieser soll über Media Queries nur eingeblendet werden, wenn der Browser mindestens X Pixel breit ist.

Ein sich wiederholendes Bild ist über ne Hintergrundgrafik per CSS grundsätzlich ja recht einfach zu realisieren - genau wie das einblenden eines Elementes per Media Queries.

Was ich nicht hinbekomme ist, dass
1. der Baum hinter dem Gras ist, da ich das Gras nur als Hintergrundgrafik eines <div> Elements per CSS wiederholen kann, oder?
2. das Gras immer am unteren Rand des Browsers ist
3. der Baum immer am linken Rand des Browsers bleibt

Ich wäre froh, wenn Ihr mir ein paar Stichworte mit auf dem Weg geben könntet, wie sich das umsetzen lässt.

Beste Grüße
Tian

  1. @@Tian Kruse:

    nuqneH

    da ich das Gras nur als Hintergrundgrafik eines <div> Elements per CSS wiederholen kann, oder?

    Nein.

    Ich wäre froh, wenn Ihr mir ein paar Stichworte mit auf dem Weg geben könntet, wie sich das umsetzen lässt.

    Multiple Hintergründe.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Tian Kruse:

      nuqneH

      da ich das Gras nur als Hintergrundgrafik eines <div> Elements per CSS wiederholen kann, oder?

      Nein.

      Ich wäre froh, wenn Ihr mir ein paar Stichworte mit auf dem Weg geben könntet, wie sich das umsetzen lässt.

      Multiple Hintergründe.

      Qapla'

      Um dann per Media Queries den Baum auszublenden wenn Browser Breite kleiner xxx Pixel ist, mache ich also am besten 2 Stylesheet fertig? Einen nur mit Gras und einen mit Gras und Baum?

      1. @@Tian Kruse:

        nuqneH

        Um dann per Media Queries den Baum auszublenden wenn Browser Breite kleiner xxx Pixel ist, mache ich also am besten 2 Stylesheet fertig? Einen nur mit Gras und einen mit Gras und Baum?

        2 Stylesheets? Nö.

        2 Regeln in dem einen Stylesheet. Pseudocode:

        html
        {
          height: 100%;
          background: gras;
        }

        @media (min-width: breakpoint)
        {
          background: gras, baum;
        }

        Qapla'

        PS: Zitiere bitte sinnvoll, nicht alles.

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Wunderbar, hat alles bestens geklappt bisher.
          Wenn ich das HTML Tag per CSS in dieser Art Style

          html
          {
            height: 100%;
            background: gras;
          }

          habe ich allerdings noch ein Problem:
          Das ist dann ja wirklich alles ganz hinten im Dokument - Inhalt, der länger als der Browser ist, liegt dann ja über dem Gras bzw. dem Baum.
          Ich würde allerdings lieber das Gras bzw. den Baum im Vordergrund haben. Sprich: Inhalte, die länger als der Text sind, kommen hinter dem Gras hervor.
          Wie lässt sich das realisieren?

          Beste Grüße

          1. Om nah hoo pez nyeetz, Tian Kruse!

            Das ist dann ja wirklich alles ganz hinten im Dokument - Inhalt, der länger als der Browser ist, liegt dann ja über dem Gras bzw. dem Baum.
            Ich würde allerdings lieber das Gras bzw. den Baum im Vordergrund haben. Sprich: Inhalte, die länger als der Text sind, kommen hinter dem Gras hervor.
            Wie lässt sich das realisieren?

            z-index könnte helfen.

            Matthias

            --
            1/z ist kein Blatt Papier.

          2. Moin Namensvetter,

            html
            {
              height: 100%;
              background: gras;
            }

            habe ich allerdings noch ein Problem:
            Das ist dann ja wirklich alles ganz hinten im Dokument - Inhalt, der länger als der Browser ist, liegt dann ja über dem Gras bzw. dem Baum.
            Ich würde allerdings lieber das Gras bzw. den Baum im Vordergrund haben. Sprich: Inhalte, die länger als der Text sind, kommen hinter dem Gras hervor.
            Wie lässt sich das realisieren?

            Zum Beispiel durch ein div mit position:fixed.

            LG,
             CK

            1. @@Christian Kruse:

              nuqneH

              Zum Beispiel durch ein div

              Würg!

              Wozu gibt’s denn Pseudoelemente? html::after

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          3. Om nah hoo pez nyeetz, Tian Kruse!

            Beide Lösungsvorschläge bergen die Gefahr, dass u.U. Links nicht mehr anklickbar sind.

            Matthias

            --
            1/z ist kein Blatt Papier.