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;

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ß
Adresse

Schöne Strasse 1, Berlin

Deutschland

Counter

Counter Statistik