HTML: GIF über Bild im Hintergrund?

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.

Woher ich das weiß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

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.

also am Ende beim zweiten Body?

0
@Nicocchi

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>
1
@regex9

whoa, danke man. Da hab ich jetzt über einer Stunde dran genagt, das ist perfekt. Ich hatte zwar einennun einen funktionierenden, aber der war total umständlich und schlecht

0

Was möchtest Du wissen?