Bildbreite und Hintergrundbildbreite bei Inhaltsbereichen
Veröffentlichungsdatum: 14. September 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Das Weblic® Inhaltsbereich bzw. Inhaltsbox ermöglicht über die allgemeinen Einstellungen das Setzen einer maximalen Bildbreite und auch eine Mindestbreite bei Hintergrundbildern.
Im Standard wird das Mobile First Projekt so ausgeliefert, daß Inhaltsbereiche und Inhaltsboxen beim Einsatz von Hintergrundbildern diese ab einer bestimmten Bildschirmbreite nicht mehr anzeigen (Performancegründe).
Dies können Sie individuell im Projekt anders einstellen, wozu Ihnen in der Maske der CSS-Bearbeitung entsprechende Felder zur Verfügung stehen.
Zu den Hauptvarianten können Sie den Bereich "Allgemein" per Klick öffnen und u.a. folgende Einstellungen treffen:
- Qualität Hintergrundbild
- Maximale Bildbreite bei kleinen bzw. großen Bildschirmen
- Mindestbreite, um großes Hintergrundbild anzuzeigen
- Mindestbreite, um ein Hintergrundbild überhaupt anzuzeigen
Hier können Sie zur Breite von (Hintergrund) Bildern entweder über CSS-Variablen oder direkte Eingabe eines Wertes (z.B. 768px oder 0px) den gewünschten Wert hinterlegen.
Kleinere Hintergrundbilder für schmale Bildschirmbreiten
Wenn Sie für schmale Bildschirmbreiten (z.B. unter 768 Pixel) nicht das grosse Hintergrundbild verwenden wollen, definieren Sie dies über einen mindestens sichtbaren Bildausschnitt.
Damit dies greift, stellen Sie in den allgemeinen Einstellungen zum Inhaltsbereich die "Mindestbreite, um großes Hintergrundbild anzuzeigen" auf einen höheren Breakpoint als "Mindestbreite, um ein Hintergrundbild überhaupt anzuzeigen". Im Standard werden beide Felder mit $viewport_s_min ausgeliefert, was Sie zum grossen Hintergrundbild z.B. auf $viewport_m_min ändern:
Beispiel: Auszug aus der CSS-Datei für Inhaltsbereiche (elementSection.scss)
-w-option-elementWidthMinBackgroundDefault:$viewport_m_min; /* Mindestbreite, um großes Hintergrundbild anzuzeigen */ -w-option-elementWidthMinBackgroundVisible:$viewport_s_min; /* Mindestbreite, um ein Hintergrundbild überhaupt anzuzeigen */
Setzen Sie dann über die Einstellungen des Inhaltsbereich-Elementes in der Seite einen mindestens sichtbaren Bildausschnitt für das gewählte Hintergrundbild. Diese Einstellung ist z.B. in der Inhaltsbereich-Variante 111 aktiviert und können Sie bei Bedarf auch für andere CSS-Only-Varianten des Inhaltsbereiches aktivieren.
Bilder werden beim Seitenaufruf über die Einstellung erst ab der angegebenen Breite über JavaScript in die Seite geladen.
Sofern die Seite mit entsprechender Breite aufgerufen wurde und das Hintergrundbild geladen ist, wird dies bei Verkleinern des Browserfensters nicht wieder ausgeblendet (also auch nicht in der Seitenbearbeitung im Vorschau-Register).