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

[Der Martin]

Hi,

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.

nein, sehen wir nicht. Ich sehe im wahrsten Sinn des Wortes schwarz, und überhaupt kein Bild. Ob das nun daran liegt, dass ich kein Javascript erlaube, oder daran, dass das verbleibende Bild nebelHeader.png meinem Opera einfach zu riesig ist?

Die Nebelgrafik dauert (noch) recht lang, bis sie geladen ist, daran muss ich auch noch arbeiten.

Allerdings, ja. Lieb's Herrgöttle von Biberach! 13MB für ein Hintergrundbild! Das ist auf jeden Fall viel zuviel.

Die Waldgrafik wird über PHP ausgeliefert und entsprechend den verfügbaren Viewportbreite angepasst.

Und zusätzlich brauchst du noch Javascript, um die Breite überhaupt erst zu ermitteln.

Warum solche Bocksprünge? Soweit ich weiß, wird background-size inzwischen recht gut unterstützt.

So long,
 Martin

[Enrico]

Hi Martin,

Danke für Deine rasche Antwort.

Und zusätzlich brauchst du noch Javascript, um die Breite überhaupt erst zu ermitteln.

Ich habe diesen Ansatz gewählt, weil ich so - bitte korrigiere mich, wenn ich da falsch liege - die Waldgrafik nachfolgend über PHP nur in der benötigten Größe lade und nicht die Grafik in ihrer ursprünglichen Größe.

Soweit ich weiß, wird background-size inzwischen recht gut unterstützt.

Dafür wird die Grafik aber auch in ihrer ursprünglichen Größe geladen, oder?

Gruß Enrico

[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 🖖

[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 🖖

[Enrico]

Hallo Gunnar,

hammermässig, super! Besten Dank für Deine ausführliche Hilfe!

Gruß Enrico

[Matthias Apsel]

Hallo Enrico,

hammermässig, super! Besten Dank für Deine ausführliche Hilfe!

Dies übersetze ich mal mit: „Diese Antwort war so hilfreich, dass ich sie als eine besonders hilfreiche auszeichnen möchte.“

Ich mach das mal für dich.

Bis demnächst
Matthias

[Enrico]

Hallo Matthias,

dass ich sie als eine besonders hilfreiche auszeichnen möchte.

Absolut! :-)

Ich mach das mal für dich.

Danke! :-)

Ich wollte nun am oberen und unteren Rand des headers eine Grafik darüberlegen, die nach oben bzw. unten ins Schwarze überblendet:

header  
{  
	background-image:    url(../img/layoutAusblendungOben.png),  
                        url(../img/layoutNebel.png),  
                        url(../img/layoutNebel.png),  
                        url(../img/forestroad.jpg);  
	background-size:     100% auto,  
                        50% 60%,  
                        50% 80%,  
                        cover;  
	background-position: 0% top,  
                        0% top,  
                        0% bottom,  
                        center;  
	min-height:          20vw;  
   -webkit-animation:   nebel linear 20s infinite;  
   -moz-animation:      nebel linear 20s infinite;  
   -o-animation:        nebel linear 20s infinite;  
   animation:           nebel linear 20s infinite  
}

Jetzt funktioniert die Animation aber nicht mehr (das in meiner css-Datei auskommentierte "background-repeat: repeat-x" für die obere Ausblendung habe ich hier rausgenommen, weil ich befürchte, dass mein Code-Listing hier eh verwurstelt sein dürfte ^^).

Kann ich, durch die definierte Animation, keine weiteren Grafiken einbinden?

Gruß, Enrico

[Matthias Apsel]

Hallo Enrico,

(das in meiner css-Datei auskommentierte "background-repeat: repeat-x" für die obere Ausblendung habe ich hier rausgenommen, weil ich befürchte, dass mein Code-Listing hier eh verwurstelt sein dürfte ^^).

Benutze die Vorschau und die Hilfe zur Formatierung ;-)

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Enrico,

Jetzt funktioniert die Animation aber nicht mehr Kann ich, durch die definierte Animation, keine weiteren Grafiken einbinden?

Beschäftige dich mit der Notation multipler Hintergrundgrafiken. Du willst 5, in der Animation stehen aber nur 3.

Bis demnächst
Matthias

[Enrico]

Hallo Matthias,

Du willst 5, in der Animation stehen aber nur 3

Uffz, d.h. ich muss die beiden zusätzlichen Grafiken innerhalb der Animation bzl. "from-to" statisch definieren?

Gruß, Enrico

[Enrico]

Hmm, ich steh im Wald... ^^

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

0% = "linksbündig", "top" = oben, "bottom" = unten, also die erste Grafik (= obere Ausblendung) von oben linksbündig nach oben linksbündig bewegen und die zweite Grafik (= untere Ausblendung) von unten linksbündig nach unten linksbündig.

Selbes Resultat. Ich habe leider keine Animation mehr.

Gruß, Enrico

[Matthias Apsel]

Hallo Enrico,

Selbes Resultat. Ich habe leider keine Animation mehr.

Was hast du denn stattdessen? Nur die Ausblendungen? Dann wäre background-size fehlerhaft angegeben.

Bis demnächst
Matthias

[Enrico]

Hallo Matthias,

Dann wäre "background-size" fehlerhaft angegeben

Ah, ok, ich nähere mich an :-)

Danke Dir!

Gruß, Enrico

[Enrico]

Hallo Matthias,

zu früh gefreut oder doch wieder etwas übersehen oder nicht bedacht... ^^

Warum ist der eine Nebel jetzt auf einmal kleiner?

Gruß, Enrico

[Enrico]

Matthias? Hülfe... :-)

Ich komm nicht dahinter, warum ich jetzt diesen weißen Streifen in der Animation habe.

Gruß, Enrico

[Matthias Apsel]

Hallo Enrico,

Ich komm nicht dahinter, warum ich jetzt diesen weißen Streifen in der Animation habe.

Für die Nebel gilt

    background-position: 0 top, 0 bottom;
    background-size: 50% 60%, 50% 80%;

Mach dich schlau, was die Prozentzahlen bedeuten.

Bis demnächst
Matthias

[Enrico]

Hallo Matthias,

gut, ich habe die 60% und 80% auf jeweils 100% erhöht, aber im Beispiel von Gunnar hat es mit eben diesen Werten funktioniert und bei mir nicht mehr und das verstehe ich nicht.

Jetzt klappt's auf jeden Fall und das ist wichtig.

Danke Dir :-)

Gruß Enrico

[Matthias Apsel]

Hallo Enrico,

gut, ich habe die 60% und 80% auf jeweils 100% erhöht, aber im Beispiel von Gunnar hat es mit eben diesen Werten funktioniert und bei mir nicht mehr und das verstehe ich nicht.

Gunnar hatte keinen Wert für background-repeat gesetzt, dann gilt der defaultwert, und der ist repeat.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Gunnar Bittersmann,

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

Mehr als die Hälfte der dafür benötigten Punkte hast du ja schon ;-)

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Mehr als die Hälfte der dafür benötigten Punkte hast du ja schon ;-)

Juhu, nur noch dreiundzwölfzig als Forumsantworten getarnte Tutorials …

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Mehr als die Hälfte der dafür benötigten Punkte hast du ja schon ;-)

Juhu, nur noch dreiundzwölfzig als Forumsantworten getarnte Tutorials …

Wenn es dir keinen Spaß machen würde, würdest du sicher nicht eine einzige Antwort mehr verfassen ;-)

Bis demnächst
Matthias

[Der Martin]

Hallo,

Mit CSS!!! Multiple Anführungszeichen deuten auf einen kranken Geist hin.

Anführungszeichen??

Da dürfte der Lüfter den gespenstischen Effekt auch noch akkustisch untermalen.

Dein Lüfter hat'n Akku??

*scnr*,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Multiple Anführungszeichen deuten auf einen kranken Geist hin.

Anführungszeichen??

Radio Jerewan sagt: Im Prinzip schon. Nur nicht an, sondern aus. Und nicht Führung, sondern Ruf. Und nicht s, sondern e.

„So eine Schande, wo ist die Editierfunktion?“ (Orlando)

Da dürfte der Lüfter den gespenstischen Effekt auch noch akkustisch untermalen.

Dein Lüfter hat'n Akku??

„So eine Schande, wo ist die Editierfunktion?“ (Orlando)

LLAP 🖖