durchlaufende Hintergrundbilder
FrankMe
- css
0 Auge0 FrankMe
0 marctrix0 Matthias Apsel0 FrankMe
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
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.
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
Hallo Auge,
Danke für Deine Antwort.
Frank
[Vollzitat entfernt]
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
Hallo marctrix,
ich möchte meine Webseite weiter verbessern.
Das kann ja jeder sagen ;-)
SCNR...
https://forum.selfhtml.org/m1676324
Bis demnächst
Matthias
Hallo Matthias,
ich möchte meine Webseite weiter verbessern.
Das kann ja jeder sagen ;-)
SCNR...
Wäre aber keine Werbung... ;-)
Gruß,
Marc
PS: Der Fragensteller hier scheint mir ein Experte fürs backend zu sein...
Hallo marctrix,
Wäre aber keine Werbung... ;-)
Aber ein SEO-Versuch. Die Links sind hier jedoch mit no-follow ausgestattet ;-)
Bis demnächst
Matthias
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]
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
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
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
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
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
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
Hallo FrankMe,
schau dir mal background-attachment: local
an. Die Unterstützung ist inzwischen sehr gut.
Bis demnächst
Matthias
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