HTML: GIF über Bild im Hintergrund?
Mein Gif war eigentlich transparent und beides funktioniert einzeln. Aber wenn ich:
<body id="overlay" style="background-image:url(Name.png); background-attachment: scroll; background-image: url(Name.gif); height: 100vh; padding: 0; margin: 0;">
so eingebe (und die Namen sind natürlich anders, aber das ist jetzt auch egal), wird nur das Zweite angezeigt.
2 Antworten

Sie können auch zwei oder mehr Hintergründe mithilfe der Eigenschaft "background-image" festlegen, wenn Sie sie wie folgt durch Kommas getrennt auflisten:
background-image: url(Name.png), url(Name.gif);
Die Eigenschaft "background-attachment" ist standardmäßig "scroll". Somit können Sie diesen Teil der Anweisung löschen.
Wenn Sie für jeden Hintergrund unterschiedliche Werte für die "background-attachment"-Eigenschaft festlegen wollen, können Sie diese auch mit einem Komma auflisten. Zum Beispiel:
background-attachment: scroll, fixed;
Außerdem können Sie die Eigenschaft "background" benützen, alle Eigenschaften in einem langen Wert festzulegen:
https://developer.mozilla.org/de/docs/Web/CSS/background
background: url(Name.png) scroll, url(Name.gif) fixed;
So kann Ihr Code folgendermaßen umgeschrieben werden:
<body id="overlay" style="background-image: url(Name.png), url(Name.gif); height: 100vh; padding: 0; margin: 0;">
</body>
Ich möchte auch darauf hinweisen, dass es oft bequemer ist, "min-height: 100vh;" anstelle von "height: 100vh;" zu verwenden. Dann kann sich das <body>-Tag in der Höhe dehnen, wenn sich viel Inhalt darin befindet und das Smartphone horizontal gedreht wird.

Dein zweites background-image-Property überschreibt das erste (CSS-Grundregel). Wenn du Bilder übereinander lagern möchtest, brauchst du ein zweites HTML-Element, welches auf dem / im body-Element liegt.

Welcher zweite body? Jedes Dokument hat nur einen.
Beispiel:
<!-- doctype, head, etc. ... -->
<body style="background-image: url(...)">
<div style="background-image: url(...);height: 100vh;width: 100%;"></div>
</body>
Oder vielleicht auch ausreichend:
<!-- doctype, head, etc. ... -->
<body style="background-image: url(...)">
<img alt="Some image description" src="some-image.png">
</body>
also am Ende beim zweiten Body?