Fullscreen

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

Demo

Fullscreen Background

Hier befindet sich der Fullscreen Hintergrund in Form dieser Wassertropfen im Hintergrund
Für mein Tutorial guckt bitte hier
Lest auch meine Bemerkungen ab Mobirise v5.4.0 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);

Galerie
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

Clip Path Bilder

Bild

Dieses Beispiel zeigt eine "clip-path" CSS mit Koordinaten, die das Bild schräg abgeschnitten darstellen.

Für weitere Beispiele und Anweisungen dazu, guckt bitte auf meiner Clip Path Seite.

.bild1 {
   -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
   clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
   opacity: 0.8;
}

Für weitere Beispiele und Anweisungen dazu, guckt bitte auf meiner Clip Path Seite.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi eaque quos, nulla maxime quaerat ab non maiores, temporibus earum adipisci expedita nesciunt similique sunt omnis quisquam odit voluptatem quis culpa.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla corrupti assumenda delectus blanditiis odio optio modi reprehenderit, sint excepturi, vero debitis non odit eaque deleniti, tempora nobis ut soluta inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni repudiandae sequi placeat ea minus excepturi, minima quam. Quod enim sed nisi itaque error optio nostrum ducimus, sunt, illo, repellendus rerum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quidem eaque autem quisquam et, modi in soluta debitis iste dicta ex ab consequuntur non quas placeat! Itaque a ad, eius.

Datenschutz