Background Wrapper

Der Background Wrapper legt Bild, Video oder Farbe hinter beliebigen Inhalt. Hier stecken die meisten Fixes von heute: Klasse und Style des Wrappers, playsinline auf dem Video, die mobile Höhe und die Verschiebung.

Der Video-Block unten ist der interessanteste Fall – auf dem iPhone ging er bis heute früh sofort in den Vollbildmodus.

Hintergrundbild mit Overlay und Autoheight

Inhalt über dem Hintergrundbild

Bei aktiviertem Autoheight wächst der Hintergrund mit dem Inhalt – plus dem eingestellten Aufschlag von 60 px.

Graustufen, Raster, fester Hintergrund

Text auf entfärbtem Bild

Graustufen und reduzierte Deckkraft laufen als CSS-Filter, das Raster liegt als zweites Hintergrundbild darüber.

Ohne Medium – nur Farbe und Innenabstand

Nur Farbfläche

Ohne Medium greift der eigene Innenabstand aus dem Reiter Background – hier 5 rem oben und unten.

[Randfall] Background Wrapper ohne FlexForm

Inhalt im FlexForm-losen Wrapper

Der Wrapper hat kein gespeichertes FlexForm. Erwartet: Hintergrundbild in Standardbreite, keine Exception, und die eigenen Klassen des Wrappers im Markup.

Lokales Video als Hintergrund

Text über dem Video

21:9 auf Desktop, 430 px Höhe auf Mobilgeräten, Verschiebung auf 0. Auf dem iPhone muss das Video im Rahmen bleiben und darf nicht in den Vollbildmodus springen.