Animierten Hintergrund responsive machen

[Gunnar Bittersmann]

@@Enrico

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

Mit CSS!!![^1] Wenn du auch nur an JavaScript denkst, stirbt ein Kätzchen.

Da das Ganze wohl eher Dekoration als Seiteninhalt ist, ist ein img-Element schon mal unangebracht. Der Wald ist Hintergrundbild eines Elements, header könnte sich anbieten. Damit auch was zu sehen ist, bekommt der eine Mindesthöhe:

header
{
  min-height: 20vw;
  background-image: url(forestroad.jpg);
  background-position: center;
  background-size: cover;
}

Der Nebel ist eine weiteres Hintergrundbild, das vor den Wald gelegt wird:

header
{
  min-height: 20vw;
  background-image: url(fog.png), url(forestroad.jpg);
  background-position: 0% bottom, center
  background-size: 50% 80%, cover;
}

Durch Animation von background-position bewegt sich der Nebel horizontal. Damit’s nicht ruckelt, hat der Nebel-Hintergrund 50% Breite:

@keyframes fog
{
  from { background-position: 0% bottom, center }
    to { background-position: 100% bottom, center }
}

header
{
  min-height: 20vw;
  background-image: url(fog.png), url(forestroad.jpg);
  background-position: 0% bottom, center
  background-size: 50% 80%, cover;
  animation: fog linear 20s infinite;
}

Das sieht dann so aus wie bei dir, nur ohne JavaScript. Und alles mit Prozentwerten angegeben ist, passt sich das der Viewportbreite an. Fertig.

Fertig? Nein.

Das sieht so aus wie bei dir: Eine flache Nebelschicht schiebt sich die x-Achse entlang. Sieht nicht natürlich aus.

Abhilfe schafft eine zweite Nebelschicht, die sich mit anderer Geschwindigkeit bewegt. Dazu nehmen wir natürlich dasselbe Bild, etwas anders skaliert und positioniert:

@keyframes fog
{
  from { background-position: 0% top, 0% bottom, center }
    to { background-position: 200% top, 100% bottom, center }
}

header
{
  min-height: 20vw;
  background-image: url(fog.png), url(fog.png), url(forestroad.jpg);
  background-size: 50% 60%, 50% 80%, cover;
  background-position: 0% top, 0% bottom, center;
  animation: fog linear 20s infinite;
}

Und dann sieht’s so aus.

Nachtrag: Mit den Transparenzen hat die Grafikkarte schon einiges zu tun, und das durch die Animation auch noch dauernd. Da dürfte der Lüfter den gespenstischen Effekt auch noch akkustisch untermalen.

LLAP 🖖