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:
    110
    Danke erhalten:
    20
    Danke vergeben:
    21
    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:
    110
    Danke erhalten:
    20
    Danke vergeben:
    21
    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:
    110
    Danke erhalten:
    20
    Danke vergeben:
    21
    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:
    110
    Danke erhalten:
    20
    Danke vergeben:
    21
    #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.053
    Danke erhalten:
    873
    Danke vergeben:
    336
    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:
    110
    Danke erhalten:
    20
    Danke vergeben:
    21
    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.053
    Danke erhalten:
    873
    Danke vergeben:
    336
    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:
    110
    Danke erhalten:
    20
    Danke vergeben:
    21
    das hatte ich schon gemacht, ging nicht. Aber es funktioniert mit eigenem CSS