PortfolioM4

Beispiel mit einem Fullscreen Background Bild, das ich mit dem Skript
backstretch
hier eingefügt habe. Zum Dia-Show-Beispiel.
Ein weiteres Beispiel mit nur einigen Blocks, die den Background zeigen.
Achtung: Siehe Bemerkungen zu Mobirise ab v5.4.0

Backstretch

Bitte folgt meiner Anleitung auf meiner NOF Seite für das Bachstretch Skript.

Ich habe hier also lediglich das Skript "jquery.backstretch.js" und mein Hintergrundbild "wellen.jpg" händisch in ein Verzeichnis "backstretch" auf meinen Server kopiert und auch in mein lokales Verzeichnis, damit ich das bereits lokal testen kann. Das Bild hat hier einen Fade-Effekt von 0,75 Sekunden.

Vergesst nicht die Hintergrundfarbe aller Blöcke auf transparent zu setzen. Alle Hintergründe der Boxen, die den Fullscreen Background zeigen sollen, wurden über den "Code Editor" geändert. In Mobirise4-Themen wählt Ihr irgendeine Farbe als Hintergrund für den Block und ändert diese dann im Bereich "CSS Editor" des jeweiligen Blocks ...

von:

background-color: @bg-value;

in:

background-color: transparent; 

... oder bei leicht abgedunkelter, transparenter Overlay-Farbe in z.B. Schwarz mit einer Deckkraft (Opacity) von zum Beispiel 0.5 = 50%: 

background-color: rgba(0, 0, 0, 0.5);


Kopiert dann die Verweise zum Skript und Bild in die "Page Settings" > "End of <body> code"

<script src="./backstretch/jquery.backstretch.js"></script>

<script>
       $.backstretch([
          "./backstretch/wellen.jpg"
          ], {
          fade: 750
       });
</script>

CSS

Ich habe hier dieser hellblauen Box folgende CSS gegeben, damit sich die Schrift besser vom Fullscreen-Background abheben kann.

Der Hintergrundfarbe habe ich hier eine Deckkraft von 80% gegeben, einen Innenabstand von 20px und auch die Ecken um 20px abgerundet. Die maximale Breite von 90% habe ich für das Smartphone hinzugefügt, damit die Box auf jeder Seite 5% Abstand zum Rand hat. Die Class habe ich hier "myboxblau" genannt und diese an das entsprechende <div> im Code Editor hinzugefügt:

<div class="col-md-8 col-sm-12 text-section myboxblau">

Schreibt die CSS direkt in den "CSS Editor" vom "Code Editor":

.myboxblau {
    background: rgba(173, 216, 230, 0.8);
    padding: 20px;
    border-radius: 20px;
    max-width: 90%;
}

Dieser Block hat einen eigenen "Backstretch" Hintergrund:

Kopiert dann den Verweis zum Skript mit Backstretch-Class und URL zum Bild in die "Page Settings" > "End of <body> code"

<script scr="./backstretch/jquery.bachstretch.js"></script>

<!-- Hintergrundbild einzelner Block -->
<script> 
   $(".textblock").backstretch("https://www.mobirise-tutorials.com/PortfolioM4/backstretch/images/wassertropfen");
</script>


Gebt dem äußeren <div> die class="container-fluid" (volle Breite) und die class="textblock" aus dem Skript oben, mit der Ihr dem Backstretch-Skript mitteilt, in welchen Blocks dieser Hintergrund erscheinen soll.

<div class="container-fluid textblock">
   Inhalt vom Block
</div>

nach oben

Mobirise Tutorials

Dieser Footer wurde mit dem "global" Attribut versehen
und muss somit nur einmalig in diesem Projekt geändert werden.
Das funktioniert nur bei der Menüleiste und beim Footer.