free responsive site templates

Parallax

Im Block-Beispiel unten wurde das kleine Bild als Hintergrundbild eingesetzt

Parallax im <div>

Full-Width Intro mit Bild im Hintergrund und Overlay-Effekt.

Das Foto rechts ist ein Hintergrundbild mit einer fixierten Position

Ich habe hier den Block "Intro with image" aus dem Standard-Mobirise4 Thema verwendet und das <img> Tag (Bild) mit dem DIV unten ersetzt.

Die CSS in den Bereich "CSS Editor" vom "Code Editor":

.myparallax {
  background-image: url('http://www.mobirise-tutorials.com/Testseiten/Software-Ende/parallax/Berlin-Mitte.jpg'); 
  height: 400px; 
  background-attachment: fixed; 
  background-position: center; 
  background-repeat: no-repeat; 
}

Das DIV mit der class="myparallax" von oben:

<div class="myparallax"></div>

Mobirise

Bild über zwei
Blöcke

img {
 margin-top: -300px;
 border-radius: 30px 30px 0px 0px;
 @media (max-width: 991px) {
   margin-top: -150px;
 }
}

© Copyright Mobirise-Tutorials.com