1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Parallax Effekt - Hintergrundbild verzogen

Dieses Thema im Forum "Design" wurde erstellt von susannekoeln, 10. Mai 2020.

Schlagworte:
  1. susannekoeln

    susannekoeln New Member

    Registriert seit:
    10. Mai 2020
    Beiträge:
    3
    Zustimmungen:
    0
    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
     
    #1 susannekoeln, 10. Mai 2020
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    592
    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.
     
    #2 SEpp55, 10. Mai 2020
    Zuletzt bearbeitet: 10. Mai 2020
  3. susannekoeln

    susannekoeln New Member

    Registriert seit:
    10. Mai 2020
    Beiträge:
    3
    Zustimmungen:
    0
    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
     
    #3 susannekoeln, 10. Mai 2020
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    592
    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.
     
    #4 SEpp55, 11. Mai 2020
  5. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    592
    upload_2020-5-11_8-36-54.png
     
    #5 SEpp55, 11. Mai 2020
  6. susannekoeln

    susannekoeln New Member

    Registriert seit:
    10. Mai 2020
    Beiträge:
    3
    Zustimmungen:
    0
    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 :)
     
    #6 susannekoeln, 11. Mai 2020
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    592
    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 ;)
     
    #7 SEpp55, 11. Mai 2020
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden