Hintergrundbild für mobile Ansicht tauschen

[whitestone]

Ich habe ein Hintergrundbild eingefügt im Elementtyp Hintergrundbild/Farbe und bei der Bildgröße Background-Image ausgewählt.

Für das Hintergrundbild habe ich den wichtigen Bildausschnitt definiert, der greift allerdings nicht in der mobilen Ansicht. In der mobilen Ansicht wird per CSS ein verkleinertes Bild ausgegeben mit dem Zusatz "!important".

Kann ich das per CSS überschreiben und ein spezifisch für die mobile Ansicht erstelltes Bild ausgeben?

[Tom]

Hi!

ich würde dem Hintergrundbild/Farbe die CSS-Klasse "overwriteMobBg" vergeben.

Anhand dieser Klasse dann in der customize.css überschreiben:

body.viewport_mobile .ce_bgimage.overwriteMobBg .ce_bgimage-image {background-image: url(files/img/mobile.jpg)!important}

Schöne Grüße
Tom

[whitestone]

Danke für die Hilfe.
Ich habe derm Hintergrundbild/Farbe die Klasse "overwriteMobBgLernpraxis" vergeben. In der custom.css die Anweisung eingefügt. Leider greift das CSS nicht. Laut Inspektion wird das Hintergrundbild in der mobilen Ansicht durch eine Inline-Anweisung ersetzt - siehe Screenshot

@media (max-width: 767px)
.ce_bgimage_132472 > .ce_bgimage-image {
background-image: url(/assets/images/c/Lernpraxis-Sanduhr-ABC-4b780ypsx4x7yv3.webp) !important;
}

Folgende URL zum Anschauen: https://lerncoaches.net/lernpraxis

[Tom]

Der Fehler liegt in der customize.css Zeile 741. Da fehlt beim Kommentar ein /

[whitestone]

body.viewport_mobile .ce_bgimage.overwriteMobBg .ce_bgimage-image {background-image: url(/files/img/mobile.jpg)!important}

Slash ergänzt - es klappt nun. DANKE für die Hilfe

Gibt es irgendwo eine Möglichkeit für eine Spende für den guten Support?

[Tom]

[CODE]
Gibt es irgendwo eine Möglichkeit für eine Spende für den guten Support?

Vielen Dank für das nette Feedback und dein Angebot, den Support zu unterstützen.
Eine direkte Spendenmöglichkeit gibt es aktuell nicht – aber wir freuen uns riesig, wenn du uns auf Trustpilot eine positive Bewertung hinterlässt. Das hilft uns, anderen Nutzern zu zeigen, wie zufrieden unsere Kunden sind, und motiviert uns, weiterhin unser Bestes zu geben.

Hier geht’s direkt zur Bewertungsseite:
https://at.trustpilot.com/review/www...tao-themes.com