Animierten Hintergrund responsive machen
bearbeitet von 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](https://twitter.com/g16n/status/255653709827158016).
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:
~~~css
header
{
min-height: 20vw;
background-image: url(forestroad.jpg);
background-position: center;
background-size: cover;
}
~~~
Der Nebel ist eine [weiteres Hintergrundbild](http://www.w3.org/TR/css3-background/#layering), das vor den Wald gelegt wird:
~~~css
header
{
min-height: 20vw;
background-image: url(fog.png), url(forestroad.jpg);
background-position: 0% bottom, center
background-size: 50% 80%, cover;
}
~~~
Durch [Animation](http://www.w3.org/TR/css3-animations/) von `background-position` bewegt sich der Nebel horizontal. Damit’s nicht ruckelt, hat der Nebel-Hintergrund 50% Breite:
~~~css
@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:
~~~css
@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](http://bittersmann.de/samples/fog/).
LLAP 🖖
--
Ist diese Antwort _anstößig_? Dann könnte sie [_nützlich_](http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860) sein.
[^1]: Multiple Anführungszeichen deuten auf einen kranken Geist hin. In dem Fall nicht meiner. ;-)