Hintergrundbild (Malibu) unter Topbar und über Navigation

Thema wurde von GlobenShop, 20. November 2024 um 14:22 Uhr erstellt.

  1. GlobenShop

    GlobenShop Erfahrener Benutzer

    Registriert seit:
    31. Januar 2024
    Beiträge:
    102
    Danke erhalten:
    17
    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:
    18
    Danke erhalten:
    2
    Danke vergeben:
    13
    Meinst du im Header?
    So etwa?
     

    Anhänge:

  3. GlobenShop

    GlobenShop Erfahrener Benutzer

    Registriert seit:
    31. Januar 2024
    Beiträge:
    102
    Danke erhalten:
    17
    Danke vergeben:
    21
    Ja, genau das! Sag mir bitte bitte, wie es geht.
     
  4. KMM

    KMM Mitglied

    Registriert seit:
    31. Juli 2024
    Beiträge:
    18
    Danke erhalten:
    2
    Danke vergeben:
    13
    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:
    102
    Danke erhalten:
    17
    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:
    102
    Danke erhalten:
    17
    Danke vergeben:
    21
    #6 GlobenShop, 20. November 2024 um 17:48 Uhr
    Zuletzt bearbeitet: 20. November 2024 um 18:10 Uhr
    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:
    1.859
    Danke erhalten:
    767
    Danke vergeben:
    294
    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:
    102
    Danke erhalten:
    17
    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:
    1.859
    Danke erhalten:
    767
    Danke vergeben:
    294
    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:
    102
    Danke erhalten:
    17
    Danke vergeben:
    21
    das hatte ich schon gemacht, ging nicht. Aber es funktioniert mit eigenem CSS