Wechselnde Hintergrundbilder beim Scrollen möglich?

    Die folgende (mit WordPress erstellte) Website http://www.xandy.club ist mir aufgefallen, weil sie auf der Startseite ein reizvolles Feature hat.


    Auf der Website "im Poster Responsive-Stil" (ich nenn´ das mal so) wechseln die formatfüllenden Hintergrundbilder beim Scrollen zu jedem nachstehenden Artikel. Die dazwischen befindlichen Textelemente werden dabei auf einen deckenden (hier schwarzen) Hintergrund gestellt, um die direkt untereinander stehenden Bilder optisch "von einander zu trennen", wobei auch zwei verschiedene Bilder oberhalb und unterhalb eines Text-Artikels zu sehen sein können; zumindest ab einer gewissen Bildschirmauflösung ("PC-Darstellung"). In der "Smartphone-Darstellung" hingegen scrollen die Hintergrundbilder einfach mit, ohne, dass die Textpassagen (im Gegensatz zur "PC-Darstellung") darüber laufen.


    Ich hoffe, ich hab mich halbwegs verständlich ausgedrückt. Hat jemand vielleicht eine Idee, wie man dieses Feature mit Zeta Producer14 umsetzen kann?

    Ich verwende Zeta Producer 15 | Business Edition

    Einmal editiert, zuletzt von Janni ()

    Danke für den Beitrag. Aber ganz so einfach ist es leider nicht. Natürlich kann man bei den meisten ZT-Layouts jeweils einen separaten Container mit einem eigenen Hintergrundbild versehen. Das funktioniert bei dem Poster Responsive-Layout("-System") leider nicht, weil man dort nur 1 Hintergrundbild pro Seite anlegen kann - (soweit ich das beurteilen kann). Es geht doch darum, dass das (jeweilige) Hintergrundbild hinter dem zu bewegenden Textinhalt nicht mitscrollt, es aber auf ein und der selben Seite - den jeweiligen Artikeln zugeordnet(!) den passenden Bildhintergrund gibt.

    Hallo Janni,

    mit etwas CSS und HTML sollte das gehen.

    Ich habe das nachgebaut. LINK


    Du kannst das Folgendermaßen nachstellen:

    • Gehe zu Einstellungen > CSS und gib dort folgendes ein:

    • Jetzt fügst du deinen ersten Textartikel ein.
    • Darunter fügst du das Widget Quelltext mit felgendem Inhalt ein: <div></div>
    • Dieser Quelltext-Artikel bekommt die CSS-Klassen: cont bild1 zpBreakout (unten auf das Mischpult, dann auf MEHR)
    • Nun wieder dein Textartikel
    • Darunter wieder das Widget Quelltext mit dem Inhalt : <div></div> und den CSS-Klassen: cont bild2 zpBreakout
    • Und so weiter...



    Nun bekommst du natürlich meine Bilder angezeigt.

    • Lade deine Bilder auf den Server wie hier beschrieben. LINK
    • Verlinke die Bilder entsprechend im CSS-Code

    Alternativ dazu kannst du die Bilder auch über die Objekt-ID einfügen, wie hier beschrieben: LINK

    Lieber Mario,


    ganz lieben Dank für die Programmier-Tipps!

    Ich werde das schnellstmöglich testen ... und natürlich berichten!

    Allen noch einen schönen Abend.

    Hallo Mario,


    ich habe Deine Anweisungen Schritt für Schritt befolgt, und vom Grundsatz funktioniert die Sache auch wunderbar. Allerdings nur mit Deinen Bildern. Alle meine Versuche mit meinem Testbild sind leider kläglich gescheitert. Ich habe den exakten Link unter >Einstellungen >CSS eingegeben, bzw. den vorhandenen Link


    .bild1 {

    background-image: url

    ('https://www.zella.de/bilder/bruecke/1.jpg');

    }


    durch


    .bild1 {

    background-image: url

    ('https://www.meine-website.de/bgtest/bilder/testbild-01.jpg');

    }


    ersetzt.


    Leider erscheint das gewünschte Bild nicht auf der Website. Meinen eigenen Link habe ich zur Kontrolle auf Richtigkeit überprüft. Als URL "www.meine-website.de/bgtest/bilder/testbild-01.jpg" kommt erwartungsgemäß das gewünschte Bild.


    Was muss ich tun, damit das eigene Hintergrundbild auf der Website erscheint?


    P.S.: "meine-website" steht hier nur als Platzhalter für meine tatsächliche Domain

    Hallo Janni,


    ist denn Deine Seite auch SSL-verschlüsselt? Beachte bitte das https:// in Marios Code. Wenn Du kein SSL-Zertifikat installiert hast, funktioniert das Ganze nur mit http:// (ohne "s")

    Hallo Hanabi,


    vielen Dank für Deine Info!!!

    Ja, was so ein kleines "s" so alles bewirken kann. ;-)

    Jetzt klappt alles.