Hintergrundbild (Malibu) unter Topbar und über Navigation

Thema wurde von GlobenShop, 20. November 2024 erstellt.

  1. GlobenShop
    GlobenShop Erfahrener Benutzer
    Registriert seit:
    31. Januar 2024
    Beiträge:
    139
    Danke erhalten:
    35
    Danke vergeben:
    32
    Hallo zusammen,

    ich möchte gerne ein Hintergrundbild für meine Malibu Theme verwenden.
    Ich weiß, dass das Thema schon des öfteren diskutiert wurde, aber ich komm da momentan nicht klar.

    Es soll also unter der Topbar und oberhalb von der Navigation eingefügt werden.

    Kann mir jemand helfen?
     
  2. KMM
    KMM Mitglied
    Registriert seit:
    31. Juli 2024
    Beiträge:
    19
    Danke erhalten:
    2
    Danke vergeben:
    14
    Meinst du im Header?
    So etwa?
     

    Anhänge:

  3. GlobenShop
    GlobenShop Erfahrener Benutzer
    Registriert seit:
    31. Januar 2024
    Beiträge:
    139
    Danke erhalten:
    35
    Danke vergeben:
    32
    Ja, genau das! Sag mir bitte bitte, wie es geht.
     
  4. KMM
    KMM Mitglied
    Registriert seit:
    31. Juli 2024
    Beiträge:
    19
    Danke erhalten:
    2
    Danke vergeben:
    14
    Header und Footer haben die selbe Klasse "Inside". Du müsstest dem Header also eine eigene Klasse zuordnen, dann geht es.
    Im Cloud-Shop kann ich zumindest bei Honeygrid keine eigene Klasse für den Header vergeben.
    Im Self-Hosting sollte das aber machbar sein.

    Der Code für den Hintergrund wäre dann:
    .deineKlasse{
    background-image: url(bild adresse);
    }
     
  5. GlobenShop
    GlobenShop Erfahrener Benutzer
    Registriert seit:
    31. Januar 2024
    Beiträge:
    139
    Danke erhalten:
    35
    Danke vergeben:
    32
    Danke für die schnelle Antwort. Probiere es gerade aus und zeige dann das (hoffentlich) erfolgreiche Ergebnis.
     
  6. GlobenShop
    GlobenShop Erfahrener Benutzer
    Registriert seit:
    31. Januar 2024
    Beiträge:
    139
    Danke erhalten:
    35
    Danke vergeben:
    32
    #6 GlobenShop, 20. November 2024
    Zuletzt bearbeitet: 20. November 2024
    Hallo Kerstin,
    super, danke für deinen wertvollen Hinweis.

    So geht es ohne eine eigene Klasse nur für den Header:

    #header .inside {
    background-image: url(/images/dein_hintergrundbild-im_header.png);
    }
    Bildschirmfoto 2024-11-20 um 17.43.51.png

    und dann vielleicht noch ein kleine Optimierung für Smartphones damit es auch da passt:

    z.B.

    background-position: left;

    Gruß Robert
     
  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    Im Style Edit kannst du es hier machen:

    upload_2024-11-21_8-43-3.png

    Dann brauchst keinen CSS Code.
     
  8. GlobenShop
    GlobenShop Erfahrener Benutzer
    Registriert seit:
    31. Januar 2024
    Beiträge:
    139
    Danke erhalten:
    35
    Danke vergeben:
    32
    ja, das hatte ich zu Anfang auch gefunden, allerdings ging es nicht. Es entstand keine Veränderung.
    Aber am Ende habe ich es durch meinen eigenen Änderungen im CSS blockiert.
     
  9. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    upload_2024-11-21_9-48-19.png

    Da sind dann diese Einstellungen wichtig.
     
  10. GlobenShop
    GlobenShop Erfahrener Benutzer
    Registriert seit:
    31. Januar 2024
    Beiträge:
    139
    Danke erhalten:
    35
    Danke vergeben:
    32
    das hatte ich schon gemacht, ging nicht. Aber es funktioniert mit eigenem CSS