Fullscreen

Diese Seite hat einen Fullscreen Background in Form von Tropfen
Dieser Hintergrund wird hier nur in ausgewählten Mobirise-Blöcken angezeigt

Fullscreen Background

Hier befindet sich der Fullscreen Hintergrund in Form dieser Wassertropfen im Hintergrund
Für mein Tutorial guckt bitte hier

Block mit Hintergrundbild

Deckkraft

Natürlich kann man auch Blocks einfach mit der Hintergrundfarbe oder dem Hintergrundbild bestehen lassen, sodass dann nichts mehr vom Fullscreen Background zu sehen ist.

Ich habe dem Inhalt von diesem Block noch eine Deckkraft von 80% in der CSS gegeben:

& when (@bg-type = 'image') {
  background-image: url(@bg-value);
  opacity: 0.8;
}

Opacity von diesem Block

%

Backstretch

jQuery Plugin Backstretch

Dieses JavaScript lässt sich sehr leicht in alle möglichen Anwendungen einbauen, so wie eben auch in Mobirise.

Hier geht es zur Anwendung jquery-backstretch bei GitHub. 

Hier mit einer weißen Transparenz mit 90% Deckkraft:

background-color: rgba(255, 255, 255, 0.9);

CSS

Hintergrund Deckkraft

Hier ein Screenshot mit der markierten CSS-Änderung meines weißen Overlays in diesem und im Block oben.

Es wurde also die Variable der Hintergrundfarbe ...

background-color: @bgColor;

... getauscht in die RGBA Farbe:

background-color: rgba(255, 255, 255, 0.9);

Fullscreen Background

Hier mit einer Abschattierung:

background-color: transparent;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));


Für mein Tutorial zu diesem Fullscreen Background guckt hier.

100%

Alle Blocks

56%

Hälfte der Blocks

53%

Wenige Blocks