Parallax Effekt - Hintergrundbild verzogen

    Liebe Community, ich bin mit meinem Latein am Ende.

    Ich habe eine Seite mit dem WP Bakery Pagebuilder gebaut und dort eine Zeile eingefügt mit einem Bild mit den Maßen 1600x400 Pixeln. Wenn man die Seite im Browser aufruft erscheint das Bild ganz kurz scharf und so wie es sein soll und wird dann nach wenigen Momenten unscharf und recht komisch skaliert.

    In den Theme Einstellungen habe ich den Menüpunkt "Activate Parallax" aktiviert und bei den dazugehörigen Bildeinstellungen auch schon alles ausprobiert. (ausfüllen, einpassen,wiederholen...)

    Gibt es eine Möglichkeit das CSS so anzupassen dass das Bild so zu sehen ist wie in den ersten paar Sekunden? Ich möchte den Parallax Effekt damit quasi killen, das ist mir bewusst.

    https://tillkersting.de/music/till-kersting-alben/

    Vielen Dank für Eure Hilfe

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Das ist die Quadratur des Kreises!
    Du hast ein background-image mit 1904x 324px geladen.
    Das hat sozusagen mit deinem o.g. Maß von 1600x400 nicht viel gemeinsam!
    Jetzt kann man mit CSS für background-size verschiedene Effekte erzielen.

    Bei dir ist cover eingestellt - background-size: cover passt die kleinere Seite des Hintergrundbilds in die Box ein.
    Heißt, die Höhe wird ausgefüllt und links und rechts ggf. abgeschnitten!

    Wenn du das auf contain stellst - background-size: contain passt die längere Seite des Hintergrundbilds in die Box ein.
    Heißt, man sieht die vollständige Breite aber bei deinem Breite/Höhen Verhältnis ist unterhalb des Bildes der Hintergrund zu sehen.
    Weiters wird bei schmaler Darstellung (Handy) das Bild schon sehr klein - mit geringer Höhe angezeigt.

    PS.: Weiters spielt noch die eingestellte background-position: 50% 0px; eine Rolle.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    2 Mal editiert, zuletzt von SEpp55 (10. Mai 2020 um 19:00)

    Danke für die Antwort. Jetzt nur zwei Fragen dazu: Woher kommt das background-image mit 1904x 324px ? ich habe ja gar keins eingestellt und wie schaffe ich es dass mein 1600x400 bild den kompletten bereich in der breite und höhe zu 100 prozent ausfüllt? krieg ich das via css hin? habe absolut keine Ahnung von css...sorry

    Woher das Bild kommt, möglich mit dem Theme!
    Ich kann nur sagen, das es unter https:/deinedomain.de/wp-content/uploads/2020/05/musik_big-1.jpg gespeichert ist. (Wie alle anderen Headerbilder (-video) auch! Lt Grafikinformation - Modifikation: Samstag, 9. Mai 2020, 16:06:25
    Da ich weder das Theme habe (kaufen werde) noch den WPBakery Page Builder habe, kann ich nur vermuten (versuchen den Code zu interpretieren).
    Es besteht die Seite (id="post-3850" mit deinen Alben, die mit dem WPBakery erstellt wurde. Die class="vc...." Bezeichnung stammt noch aus der Zeit, als sich der WPBakery noch "Visual-Composer" nannte und class="wpb....." ist ja klar.
    Auf dieser Seite ist das Bild positioniert.
    Ich bin auch davon überzeugt, das der Page Builder ganz ohne CSS die Einstellungen für eine gewünschte Darstellung mitliefert.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Danke, du hast mir schonmal sehr geholfen. ich habe jetzt das richtige bild in der Auflösung gefunden und eingebaut, wenn man jetzt die seite neu lädt, wird das bild ganz kurz richtig dargestellt und dann aufgezogen, wie stelle ich dieses aufziehen ab? ich möchte dass das bild so bleibt wie in den ersten 2 sekunden :)

    Der WPBakery Page Builder hat sicher eine Menge Einstelloptionen, die ich nicht kenne. Und Youtube hat sicher einige Videos zu diesem Thema.
    Ich kann dir die Einstellungen nicht suchen, siehe in #4 ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden