Standard (1280px)
Volle Breite mit der CSS-Klasse „container-fluid“
1920px mit der CSS-Klasse „container-1920“
1600px mit der CSS-Klasse „container-1600“
1440px mit der CSS-Klasse „container-1440“
920px mit der CSS-Klasse „container-920“
Grids (CSS-Klasse "grid-xxx") z.B. grid-50-50 oder grid-33-33-33
50
50
66
33
33
66
75
25
25
75
33
33
33
25
25
25
25
20
20
20
20
20
Hintergrundfarben
Die Hintergrundfarben können zum einen über den Inspektor ausgewählt werden, zum anderen über folgende CSS-Klassen:
CSS-Klasse „bg-primary“
CSS-Klasse „bg-primary-gradient“
CSS-Klasse „bg-secondary“
CSS-Klasse „bg-secondary-gradient“
CSS-Klasse „bg-gray“
CSS-Klasse „bg-lightgray“
Hintergrundbilder
CSS-Klassen „container-fluid container-background-image“ im umgebenden Section-Element. Für Die Desktop-Ansicht und die Mobile-Ansicht können zwei unterschiedliche Bilder eingefügt werden, die jeweils über die CSS-Klassen „img-desktop“ und „img-mobile“ ein- bzw- ausgeblendet werden.
Die Positionierung der Caption erfolgt über diese CSS-Klassen: „align-top-left“, „align-top-center“, „align-top-right“, „align-center-left“, „align-center-center“, „align-center-right“, „align-bottom-left“, „align-bottom-center“, „align-bottom-right“.
![](https://www.swbt.de/_Resources/Persistent/b/9/2/d/b92d633b8d60396d46e2850fdfe5ada1348a1aea/background-teaser-dummy-desktop-800.jpg)
![](https://www.swbt.de/_Resources/Persistent/5/5/9/a/559a627a563edbb228743baa6288e0cbb825c042/background-teaser-dummy-mobile.jpg)
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit
Parallaxe Hintergrundbilder
Um dem Hintergrund-Bild einen Parallax-Effekt hinzuzufügen, wird die CSS-Klasse „container-parallax“ beim umgebenden Section-Element ergänzt. Mit der Bildausrichtung (Mitte, Rechts) kann die Positionierung etwas beinflusst werden.
![](https://www.swbt.de/_Resources/Persistent/a/f/f/7/aff7a2cc391472a19629b1baca575cd352b87c4b/background-teaser-e-mobilitaet-2-desktop_3000x1688-2560x1440.jpg)
![](https://www.swbt.de/_Resources/Persistent/6/b/b/9/6bb944b697f910e41adf83b6f463471136d75609/background-teaser-e-mobilitaet-2-mobile_750x820.jpg)
Mit der SWM auf der Überholspur
Lorem ipsum dolor sit
![](https://www.swbt.de/_Resources/Persistent/b/9/2/d/b92d633b8d60396d46e2850fdfe5ada1348a1aea/background-teaser-dummy-desktop-800.jpg)
![](https://www.swbt.de/_Resources/Persistent/5/5/9/a/559a627a563edbb228743baa6288e0cbb825c042/background-teaser-dummy-mobile.jpg)
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit