Puntherline
Neues Mitglied
Hallo!
Ich bin gerade dabei eine Website zu erstellen und komme einfach nicht weiter. Ich habe es geschafft, einen Hintergrund stationär zu machen und einen Transparenten darüber zu legen und zu animieren. Beide Hintergründe sollen im Hintergrund sein, jedoch ist der animierte Hintergrund weg, so bald der Content der Seite drüber kommt. Hier mal HTML und CSS Datein:
Ich bin gerade dabei eine Website zu erstellen und komme einfach nicht weiter. Ich habe es geschafft, einen Hintergrund stationär zu machen und einen Transparenten darüber zu legen und zu animieren. Beide Hintergründe sollen im Hintergrund sein, jedoch ist der animierte Hintergrund weg, so bald der Content der Seite drüber kommt. Hier mal HTML und CSS Datein:
HTML:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<div id="vertical-scroll"></div>
<p>Text</p>
</body>
</html>
CSS:
body {
background-image: url(STATICBACKGROUND.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
overflow-y: hidden;
overflow-x: hidden;
overflow: auto;
background-size: auto;
font-family: Verdana;
text-align: center;
color: white;
}
#vertical-scroll {
width: 1920px;
height: 1080px;
background: url(MOVINGBACKGROUND.png) repeat-y;
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s linear infinite;
background-attachment: fixed;
overflow: auto;
overflow-y: hidden;
overflow-x: hidden;
background-size: auto;
}
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: 0 1080px;}
}
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: 0 1080px;}
}
Zuletzt bearbeitet:
