Hintergrund Fixiert

Hintergrundbild mittels CSS fixieren.
Parallax Effekt.

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;

Parallax Effekt Mobirise

Dieser Hintergrund hat den default Parallax Effekt von Mobirise

Oben zum Vergleich der originale Mobirise Parallax-Effekt

und unten der mittels CSS fixierte ParallaxEffekt.

Das gleiche Bild fixiert

Dieser Hintergrund hat den fixierten Parallax Effekt mit CSS

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>

Parallax im <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.

Viel Spaß

Dieser Hintergrund wechselt von Graustufen in ein farbiges Bild

Adresse

Schöne Strasse 1, Berlin

Deutschland