Hintergrundbild Dawn Theme

[Thomas_7_1]

Hallo zusammen,

ich bin Anfänger und benutze das Dawn Theme. Nun würde ich gerne ein Hintergrundbild einrichten, welches nicht nur eine Slide-Show ist, sondern auch in den Header geht (Bild & Link angehängt), also ein Komplettbild ist.
Was für eine CSS Code brauche ich denn hier?

Falls es möglich wäre, wäre es super, wenn beim Scrollen nach unten die Ankündigungsleiste (Gratis Versand, etc) erscheint. Diese Ankündigungsleiste soll dann bei Produktseiten bestehen bleiben und nur bei der Startseite ohne Scrollen zuerst nicht ersichtlich sein. Wie muss der Css Code hierbei geändert werden?

Ich freue mich über Rückmeldungen und wünsche allen einen schönen Rosenmontag!

MfG
Thomas

https://eu.representclo.com/?utm_source=google&utm_medium=cpc&utm_campaign=googleads_rep_brand&utm_content=brand&gclsrc=aw.ds&&nbt=nb%3Aadwords%3Ag%3A11143979005%3A108462833199%3A648054867594&nb_adtype=&nb_kwd=represent&nb_ti=kwd-173017539&nb_mi=&nb_pc=&nb_pi=&nb_ppi=&nb_placement=&nb_si=%7Bsourceid%7D&nb_li_ms=&nb_lp_ms=&nb_fii=&nb_ap=&nb_mt=e&gad_source=1&gclid=Cj0KCQjwk6SwBhDPARIsAJ59GwcPAB5YOmgvUIslLXAK1RfJgOR5lzFpOV8v4NAGvTcn7fW66HG5I7QaAnNFEALw_wcB)

[shmttx]

servus ich habe das so gelöst.

gibt bestimmt noch viele andere lösungen

in der theme.liquid zwischen der zeile 351 - 352 diesen code einfügen

{% if template == ‘index’ %}

.shopify-section-group-header-group.announcement-bar-section { height: 5px; } .header-wrapper { position: absolute; width: 100%; background: transparent; transition: background 0.5s; /* Füge eine Übergangseigenschaft hinzu */ } .header-wrapper.scrolled { background: white !important; /* Ändere die Hintergrundfarbe auf Weiß, wenn der Header gescrollt wird */ } .header-wrapper .header { margin-top: 10px; }

{% endif %}

ergebnis

[Thomas_7_1]

Perfekt, vielen Dank. Ich habe zwar einen anderen Code eingegeben, habe aber das gleiche Ergebnis!
(https://www.youtube.com/watch?v=izoPqk4zsLs)

Weiß jemand wie man das Bild auf die komplette Größe vom Screen bekommt (siehe Represent oder 6pm)?
https://www.6pmseason.com/

Würde gerne die Ankündigunsleiste in Schwarz machen und das Bild auf den ganzen Screen…
Welchen Code brauche ich hier?

Grüße

[shmttx]

okay ich werde deinen code evtl auch mal ansehen,

bei meinen wäre das so dass wenn du runter scrollst der header dann weiss wird und wenn du oben wieder bist transparent. ich suche aber immernoch nach einer lösung damit die schrift sich inventiert bzw die schrift von schwartz in weiss ändert wenn er transparent ist! grüße und viel erfolg

[Thomas_7_1]

Vielen Dank, dir auch viel Erfolg!
Noch drei Fragen hätte ich
Weißt du eventuell , wie man ein Bild auf volle Desktop und Mobilgröße beakommt (siehe www.6pmseason.com)?
Muss ich deinen Code bei “Code bearbeiten” bei theme.liquid einfügen oder bei benutzerdefinierten CSS?
Kann deine Theme trotz Eintragung bei “Code bearbeiten” geupdated werden?

Vielen Dank dir!

[shmttx]

Gehe in Code bearbeiten und dann in die Theme.liquid da fügst du meinen code ein wie oben beschrieben. was meinst du mit geupdatet? die Farb einstellungen müsstet du dann im code bearbeiten von mir.

Wegen dem Banner auf voller größe suche ich auch nach ner lösung. eine Halbe lösung habe ich schon mal

hier so meinst du oder

mobile ansicht

zum ausprobieren habe ich die custom.liquid in den sectionen gewählt

und den code eingetragen oben das HTML unten CSS !!! ABER NUR ZUM TESTEN!! ICH Suche nach ner besseren lösung

HMTL:

Responsive Image Hero

Your Title

Your description goes here.

CSS:

body, html {
margin: 0;
padding: 0;
height: 100%;
}

.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.hero img {
width: 100%;
height: 100%;
object-fit: cover;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Adjust the opacity and color as needed */
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}

.content h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

.content p {
font-size: 1.2em;
}

gruß

[shmttx]

Du musst halt wissen, willst du nur ein HeroBanner mit 1 bild oder einen Slider mit mehren Bildern oben

[Thomas_7_1]

@shmttx vielen Dank für deine tollen Tipps!
Würde bevorzugt eher nur 1Bild nehmen anstatt einer Slideshow…
Kann ich den Code von dir eingeben oder denkst du, dass da Probleme entstehen können?
Viele Grüße

[shmttx]

also ich hab jetzt die image banner section bearbeitet damit ide Attriubte LARGE dann auf die Volle größe ist

damit musst du die image-banner-section.css verändern aber ich hab das problem nun dass in mobiler ansicht das bild unscharf ist leider.

diese css namen suchen und dann den code jeweils ersetzen

.banner–large:not(.banner–adapt) {
width: 100% !important;
height: 100vh !important;
overflow: hidden;
}

.banner–large.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–large.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
width: 100% !important;
height: 100vh !important;
overflow: hidden;
}

.banner–large:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
width: 100% !important;
height: 100vh !important;
overflow: hidden;
}

[shmttx]

mach dir am besten vorher immer eine kopie von den CSS oder Liquids die du änderst

hier dann LARGE auswählen im Menü