PortfolioM4

Beispiel mit einem Fullscreen Background Bild, das ich mit dem Skript
backstretch
hier eingefügt habe. Zum Dia-Show-Beispiel.

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, so wie auch in meinem Farbverlauf-Tutorial bereits beschrieben.

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%;
}

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.


Counter Statistik