Beispiel:Background-3.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>background-image - 3</title> <style> body { background-color: SkyBlue ; background-image: url("https://wiki.selfhtml.org/images/1/1c/Cloud.svg"), url("https://wiki.selfhtml.org/images/2/2e/Flugzeug.svg"); background-repeat: no-repeat; background-position:
top right, center top;
background-size:
200px auto, 300px auto;
animation: fly 10s linear infinite; color: midnightblue; height: 100vh; }
@keyframes fly { from { background-position: top right, 120% center; } to { background-position: top right, 0% center; } }
h1 { margin-inline: 2em; margin-block: 6em 5em; } </style> </head> <body>
Flieger, grüß mir die Sonne …
<footer>
Dieses Beispiel demonstriert die Wirkung der Eigenschaft background-position in Verbindung mit animation.
</footer> </body> </html>
