FROM CACHE - de_header

Hintergrundbild Dawn Theme

Hintergrundbild Dawn Theme

Thomas_7
Entdecker
15 0 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_c...)

9 ANTWORTEN 9

shmttx
Tourist
8 0 2

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>

<script>
// JavaScript-Code, um den Header zu überwachen und die CSS-Klasse hinzuzufügen
window.addEventListener('scroll', function () {
var headerWrapper = document.querySelector('.header-wrapper');
if (window.scrollY > 0) {
headerWrapper.classList.add('scrolled');
} else {
headerWrapper.classList.remove('scrolled');
}
});
</script>
{% endif %}

 

shmttx_0-1711984082348.png

shmttx_1-1711984178690.png

ergebnis

 

shmttx_2-1711984207149.png

 

Thomas_7
Entdecker
15 0 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
Tourist
8 0 2

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
Entdecker
15 0 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
Tourist
8 0 2

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

shmttx_0-1712094161603.png

mobile ansicht

shmttx_2-1712094201016.png

 

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

shmttx_3-1712094307978.png

 

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
Tourist
8 0 2

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

Thomas_7
Entdecker
15 0 1

@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
Tourist
8 0 2

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.

 

shmttx_0-1712226163519.png

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
Tourist
8 0 2

shmttx_1-1712226392311.png

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

 

 

 

shmttx_2-1712226460359.png

 hier dann LARGE auswählen im Menü