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.