Hintergrund
Es stehen zwei Möglichkeiten zur Verfügung, um einem Inhaltselement ein Hintergrundbild zuzuweisen.
Die erste Varianet wird vom Bootstrap-Package bereitgestellt und ist nicht verfügbar, wenn dem Inhaltselement kein Rahmen zugewiesen wird. Bei dieser Lösung wird das Hintergrundbild einem zusätzlich generiertem Container zugewiesen. Die Implementation erlaubt die Verwendung verschiedener Bildgrössen in Funktion der Bildschirmbreite.
Die zweite Variante ist auch verfügbar, wenn dem Inhaltselement kein Rahmen zugewiesen wurde. Das Hintergrundbild wird im umschliessenden Container inline zugewiesen.
Hintergrund mit erster Variante
<div id="c277" class="frame ...">
<div class="frame-backgroundimage-container">
<div id="frame-backgroundimage-277" class="frame-backgroundimage">
<style>
#frame-backgroundimage-277 { background-image: url('...193428_c7973756a7.jpg'); }
@media (min-width: 576px) { #frame-backgroundimage-277 { background-image: url('...193428_e87e49ccc9.jpg'); }}
@media (min-width: 768px) { #frame-backgroundimage-277 { background-image: url('...3b9fe23710.jpg'); }}
@media (min-width: 992px) { #frame-backgroundimage-277 { background-image: url('...7ac346f740.jpg'); }}
@media (min-width: 1200px) { #frame-backgroundimage-277 { background-image: url('...147e1e3fe8.jpg'); }}
</style>
</div>
</div>
<div class="frame-container">
<div class="frame-inner">
...
</div>
</div>
</div>
Hintergrund mit zweiter Variante (inline)
<div id="c278" class="frame ..." style="background-image: url(...193428.jpg);">
<div class="frame-container">
<div class="frame-inner">
...
</div>
</div>
</div>
Hintergrund mit Parallax-Effekt
Dieses Text-Inhaltselement wurde in die mittlere Spalte eines Drei-Spalten-Strukturelementes eingefügt. Dem Strukturelement wurde ein Hintergrundbild mit Parallax-Effekt zugewiesen.