Bild im Aktionsbereich Parallax austauschen

Lesezeit 4 min

Das Hintergrund-Bild im Aktionsbereich mit Parallax-Effekt kann durch überschreiben der CSS-Klasse in der CSS-Datei z.B. theme.css ausgetauscht werden:

  1. Lade das neue Hintergrund-Bild in das Verzeichnis:
    /templates/DEIN-TEMPLATEChild/themes/base/images/  hoch
  2. Öffne die CSS-Datei theme.css unter:
    /templates/IHR-TEMPLATEChild/themes/DEINTHEME/deineDatei.css
  3. Füge den untenstehende Code ein und ersetze den Bildnamen.
.parallax {
background-image: url("../base/images/DEIN-BILD.jpg");
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}

Eigenes Parallax-Bild zu jedem Bereich

Nachfolgend zeige ich wie man zu jedem einzelnen Parallax-Bereich ein eigenes Bild zuweisen kann und wie man das Problem mit den Texten bei den dunklen und hellen Bildern löst.

Das Beispiel basiert auf dem Flat-Template, egal welches Theme.

Als erstes formatiert man den Parallax-Bereich so, dass dieser Hintergrund-Bilder aufnehmen kann.

.parallax {
padding: 0;
background-color: transparent;
height: auto;
}
.parallax .item {
padding-top: 50px;
background-color: #f7f7f7;
padding-bottom: 50px;
}
.parallax .item .bg {
margin-top: -50px;
margin-bottom: -50px;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding: 50px 0;
}

Der CSS-Code kann am Ende der Bootstrap-Datei eigeügt werden.

Das Parallax-Bild im Shopbackend zuweisen

In der Linkgruppe <Parallax> auf die Wunschseite gehen und dort das Quellcode-Ansicht beim <Inhalt> aktivieren.

<div class="bg" style="background-image: url(templates/Flat/parallax.jpg);">
<h4>Dies ist Neu</h4>
<h5>Sparen bis zu 30%</h5>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Integer sed arcu massa.</div>
<a class="btn btn-primary" href="/navi.php?q=2">Jetzt anschauen</a>
</div>

Wichtig ist der obere Bereich mit dem Hintergrundbild und dass dieser den Text umschliesst. Als Pfad kann man entweder das Template-Verzeichnis angeben oder <Mediafiles>, wo das Bild abgelegt ist.

Wenn alles abgespeichert ist, sollte das Ganze wie folgt aussehen:

Sichtbarkeit des Textes sicherstellen

Nun haben wir das Problem, dass wir mal dunkle mal helle Bilder verwenden und der Text nur schwer zu zu lesen ist. Mit folgendem CSS-Code kann man alle Textbereiche mit einer halbtransparenten Farbe formatieren.

.offer-slider h4,
.offer-slider h5  {
display: table;
background-color: rgba(255,255,255,0.6);
padding: 5px;
}
.offer-slider .body {
background-color: rgba(255,255,255,0.6);
font-size: 16px;
font-weight: 300;
padding: 20px;
margin: 0 auto 15px auto;
width: 80%;
}

Jetzt kann man alle Bereiche mit einem eigenen Bild ausstatten und sich keine Sorgen mehr über die lesbarkeit machen.