Animierten Hintergrund responsive machen

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Schwupps, da waren die 10 Minuten um und das Editier-Zeitfenster zu.

Noch ein Nachtrag: Für einige WebKits sind noch Präfixe nötig:

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

@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;
	-webkit-animation: fog linear 20s infinite;
	animation: fog linear 20s infinite;
}

LLAP 🖖