Hintergrundbild Dawn Theme

Thomas_7 · ‎04-01-2024

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_c...)

shmttx · ‎04-01-2024

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' %}
<style>
.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;
}
</style>

ergebnis

Thomas_7 · ‎04-01-2024

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 · ‎04-02-2024

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 · ‎04-02-2024

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 · ‎04-04-2024

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Hero</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="hero">
<img src="your-image.jpg" alt="Hero Image">
<div class="overlay"></div>
<div class="content">
<h1>Your Title</h1>
<p>Your description goes here.</p>
</div>
</div>
</body>
</html>

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 · ‎04-04-2024

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

Thomas_7 · ‎04-04-2024

@shmttxvielen 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 · ‎04-04-2024

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 · ‎04-04-2024

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

hier dann LARGE auswählen im Menü

Hintergrundbild Dawn Theme

Hintergrundbild Dawn Theme

Community Blog Artikel