Der Hintergrund vom Block oben ist von mir fixiert worden, dies ist ein zusätzlicher "Parallax-Effekt", neben dem von Mobirise, den ich im Hintergrundbild unten aktiv gelassen habe. Dieser Effekt wird noch nicht von allen Browsern am mobilen Gerät unterstützt. Der Firefox-Browser stellt die CSS-Eigenschaft "fixed" aber z.B. auch am Smartphone dar.
Dazu müsst ihr lediglich an den Einstellungen des Blocks (Zahnrad) die Option "Parallax" ausschalten und dann im "Code Editor" im Bereich "CSS Editor" folgende CSS-Anweisung einfügen:
background-attachment: fixed;
Das funktioniert jedoch nicht am IPhone, da das IPhone diese CSS Eigenschaft nicht unterstützt. Daher habe ich hier diese zusätzliche CSS von Julia-Vicentini.de eingebaut, aber nur im obersten Header-Block - die anderen Blöcke weiter unten werden am IPhone weiterhin korrupt angezeigt.
CSS in den Bereich "CSS Editor" vom Block:
div::before {
content: ' ';
display: block;
background-image: url('https://www.mobirise-tutorials.com/Kette.jpg');
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10;
}
Zuvor stellt ihr in den Block-Werkzeugen von Mobirise den Hintergrund auf:
"Background Color"
und überschreibt dann diese Hintergrundfarbe im "CSS Editor" mit transparent:
background: transparent;
Oben zum Vergleich der originale Mobirise Parallax-Effekt
und unten der mittels CSS fixierte ParallaxEffekt.
Der Hintergrund vom Bildausschnitt unten ist von mir fixiert worden, dies ist ein zusätzlicher "Parallax-Effekt".
Dieser Effekt wird noch nicht von allen Browsern am mobilen Gerät unterstützt. Der Firefox-Browser stellt die CSS-Eigenschaft "fixed" aber z.B. auch am Smartphone dar.
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/BusinessM4/parallax/Seil.jpg');
height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
Das DIV mit der class="myparallax" von oben in den Bereich "HTML Editor" vom "Code Editor":
<div class="myparallax"></div>
Full-Width Intro mit Bild im Hintergrund und Overlay-Effekt.
Das Foto rechts ist ein Hintergrundbild mit einer fixierten Position
Unten noch ein Fullscreen-Hintergrundbild, dass ich ebenfalls mit CSS fixiert habe.
Guckt Euch für Fullscreen Hintergrund Effekte auch meine
Backstretch Beispiele an.