FrankMe: durchlaufende Hintergrundbilder

problematische Seite

Hallo,

ich möchte meine Webseite weiter verbessern.

Zwischen "Über mich" und "Webseiten" ist ein Bild zu sehen, welches nicht wie normale Bilder mit gescrollt wird. Dies habe ich verwirklicht, in dem ich einen transparenten div-Container anzeigen lasse mit dem Bild als Body-Hintergrund.

Nun würde ich aber gerne zwei / mehrere verschiedene Bilder an verschiedenen Stellen in dieser Form anzeigen. Aber das Hintergrundbild kann nur einmal gesetzt werden. Weiß jemand wie man diese Aufgabe realisieren könnte?

Herzliche Grüße, von Frank

--
www.mehlhop.com
  1. problematische Seite

    Hallo

    Nun würde ich aber gerne zwei / mehrere verschiedene Bilder an verschiedenen Stellen in dieser Form anzeigen. Aber das Hintergrundbild kann nur einmal gesetzt werden.

    Sicher?

    Weiß jemand wie man diese Aufgabe realisieren könnte?

    Mehrere Hintergrundbilder für <body> oder Verteilung der selben in mehreren Elementen. Das führt natürlich zu einer größeren zu übertragenden Datenmenge. Die solltest du unbedingt im Auge behalten.

    Tschö, Auge

    --
    Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
    Wolfgang Schneidewind *prust*
    1. problematische Seite

      Hallo Auge,

      Danke für Deine Antwort.

      Frank

      [Vollzitat entfernt]

      --
      www.mehlhop.com
  2. problematische Seite

    Hej FrankMe,

    ich möchte meine Webseite weiter verbessern.

    Das kann ja jeder sagen ;-)

    SCNR...

    Zwischen "Über mich" und "Webseiten" ist ein Bild zu sehen, welches nicht wie normale Bilder mit gescrollt wird. Dies habe ich verwirklicht, in dem ich einen transparenten div-Container anzeigen lasse mit dem Bild als Body-Hintergrund.

    Das ˋdivˋ kannst du dir vermutlich sparen. Wahrscheinlich hättest du den Hintergrund auch einem pseudoelement verpassen können...

    Was ich allerdings nicht nachvollziehen kann ist deine Ansage, das Bild würde nicht mitscrollen - bei mir tut es das nämlich...

    Nun würde ich aber gerne zwei / mehrere verschiedene Bilder an verschiedenen Stellen in dieser Form anzeigen. Aber das Hintergrundbild kann nur einmal gesetzt werden.

    Dass beliebig viele Hintergründe verwendet werden können, wurde ja bereits gesagt.

    Marc

    1. problematische Seite

      Hallo marctrix,

      ich möchte meine Webseite weiter verbessern.

      Das kann ja jeder sagen ;-)

      SCNR...

      https://forum.selfhtml.org/m1676324

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        Hallo Matthias,

        ich möchte meine Webseite weiter verbessern.

        Das kann ja jeder sagen ;-)

        SCNR...

        https://forum.selfhtml.org/m1676324

        Wäre aber keine Werbung... ;-)

        Gruß,

        Marc

        PS: Der Fragensteller hier scheint mir ein Experte fürs backend zu sein...

        1. problematische Seite

          Hallo marctrix,

          Wäre aber keine Werbung... ;-)

          Aber ein SEO-Versuch. Die Links sind hier jedoch mit no-follow ausgestattet ;-)

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. problematische Seite

            Ich glaube nicht, dass ich hier Werbung machen kann und mit nofollows auch kein SEO. Aber bei allem Mißtrauen..., vielleicht will ich ja wirklich meine Webseite verbessern? Ist das vorstellbar? Und wenn ich's erklären will, dann ist es einfacher den Link bereit zu stellen.

            Frank

            [Vollzitat entfernt]

            --
            www.mehlhop.com
            1. problematische Seite

              Hallo FrankMe,

              vielleicht will ich ja wirklich meine Webseite verbessern? Ist das vorstellbar?

              Vorstellbar schon, aber beim ersten mal war ich wirklich der Meinung, dass du die Frage nur gestellt hast, um einen Backlink zu erhalten. Zu unwahrscheinlich erschien mir, dass ein Webentwickler nicht weiß, wie ein z-index in die eigene CSS-Ressource zu integrieren ist. Zudem du auch auf diese Frage erst heute reagiert hast.

              [Vollzitat entfernt]

              Bitte vermeide Vollzitate. Sie stören nur den Lesefluss. Zitiere nur das, worauf du dich konkret beziehst.

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            2. problematische Seite

              Hej FrankMe,

              vielleicht will ich ja wirklich meine Webseite verbessern? Ist das vorstellbar?

              Nicht nur vorstellbar - ich finde es auch gut, dass du dich an dieses Forum hier wendest.

              Wenn es auch mal etwas schroff werden kann: die Leute hier kennen sich aus!

              Schau aber auch mal ins Wiki.

              Und wenn ich's erklären will, dann ist es einfacher den Link bereit zu stellen.

              Das gehört sich auch so!

              Marc

    2. problematische Seite

      Hallo marctrix,

      Was ich allerdings nicht nachvollziehen kann ist deine Ansage, das Bild würde nicht mitscrollen - bei mir tut es das nämlich...

      Nein, das tut es nicht. Es handelt sich um ein fixiertes Hintergrundbild des body-Elements. Der Scrolleffekt entsteht durch transparenten Abschnitt im Inhalt. Quasi wie eine Lochschablone, die du bewegst.

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        Hej Matthias,

        Was ich allerdings nicht nachvollziehen kann ist deine Ansage, das Bild würde nicht mitscrollen - bei mir tut es das nämlich...

        Nein, das tut es nicht.

        Auf dem iPhone und auf dem iPad scrollt es wie jedes andere - es geht doch um die weichgezeichnete Landschaft?

        Sehe gerade, hier funktioniert es auch nicht. Ist das ein Bug, Absicht oder Einstellungssache?

        Marc

  3. problematische Seite

    Hallo FrankMe,

    Nun würde ich aber gerne zwei / mehrere verschiedene Bilder an verschiedenen Stellen in dieser Form anzeigen. Aber das Hintergrundbild kann nur einmal gesetzt werden. Weiß jemand wie man diese Aufgabe realisieren könnte?

    Schau mal nach parallax-scrolling. Etwa http://t3n.de/news/parallax-scrolling-beispiele-423046/ Leider ist mein Lieblingsbeispiel http://www.dangersoffracking.com temporarily unavailable.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. problematische Seite

      Hallo!

      Schau mal nach parallax-scrolling. Etwa http://t3n.de/news/parallax-scrolling-beispiele-423046/

      dort gibt es wirklich tolle Webseiten zu sehen.

      Danke auch für den Hinweis zu den mehreren Bildern als Hintergrund. Beides hilft mir nicht wirklich weiter. Weil beides nicht meine selbstgestellte Aufgabe löst.

      Der Hintergrund ist fixed (background-attachment: fixed;). Dadurch bekomme ich den Effekt zu stande, dass beim Scrollen der Webseite man den Eindruck hat, dass man durch ein Bild scrollt. Wenn ich mehrere Hintergründe nutzen würde, so würde man jeweils doch nur das erste der Hintergrundbilder sehen, weil diese fix sind (und der Monitor nicht senkrecht). Was das erste Bild (mit dem See im Gebirge) angeht, so bin ich mit dem "Effekt" sehr zufrieden. Nur würde ich dies gerne ein zweites Mal einbauen, weiter unten auf der Webseite, und mit einem anderen (Hintergrund-) Bild.

      Gesehen habe ich so etwas auf einer Webseite, die aber kostenpflichtig ist. Es handelt sich um die Presseseite: https://perspective-daily.de, auf der man sich zum lesen allerdings anmelden und dafür bezahlen muss. Sonst habe ich es noch nirgendwo gesehen. Natürlich habe ich mir dort den Quelltext angeschaut. Der ist aber so komplex, dass ich nicht raus finden konnte, wie die das Problem gelöst haben.

      Herzliche Grüße, von Frank

      --
      www.mehlhop.com
      1. problematische Seite

        Hallo FrankMe,

        schau dir mal background-attachment: local an. Die Unterstützung ist inzwischen sehr gut.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      2. problematische Seite

        ich habe die Lösung hier gefunden: Linkbeschreibung

        Das Zauberwort "parallax" hat mir geholfen. Natürlich nun auch auf meiner Webseite zu sehen. (Oh, Werbung?! Bitte nicht so ernst nehmen!)

        Ich danke allen Beteiligten sehr herzlich für die Hilfe! :-)

        Frank