Animierten Hintergrund responsive machen

[Enrico]

Hallo,

mich plagt seit geraumer Zeit, wie ich es hinbekomme, dass eine Hintergrundgrafik eines div responsive reagiert und sich trotzdem animieren lässt.

Hier seht ihr, was ich meine. Die Nebelgrafik dauert (noch) recht lang, bis sie geladen ist, daran muss ich auch noch arbeiten.

Die Waldgrafik wird über PHP ausgeliefert und entsprechend den verfügbaren Viewportbreite angepasst. Darüber habe ich den (das? die?) div "nebel" gelegt, dessen Hintergrund animiert wird. Über JavaScript lese ich die Höhe der Waldgrafik aus und weise dem div "nebel" die gleiche Höhe zu. Leider aber reagiert die Hintergrundgrafik nicht responsive.

Ich habe die Wald- und die Nebelgrafik gleich groß erstellt.

In der index.php habe ich den Block auskommentiert, der mir die Nebelgrafik zwar responsive macht, dann funktioniert aber die Animation nicht mehr.

Wie bekomme ich mein Vorhaben umgesetzt?

Die Dateigröße der Nebelgrafik muss ich, wie oben bereits geschrieben, natürlich auch noch optimieren. Ich möchte aber erst einmal die Funktionalität sicher stellen. Vielleicht gibt es ja auch eine reine Lösung über CSS ohne separate Nebelgrafik.

Vielen lieben Dank für eure Hilfe!

Gruß Enrico