so I want my background to be an animation so I researched a little bit but it resulted in both the text and background moving. How can I stop the text from moving? Here's where I got the css animation :Side-scrolling parallax
Heres my code:
.not {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
-webkit-animation: moving-images 400s ease infinite;
-moz-animation: moving-images 400s ease infinite;
-o-animation: moving-images 400s ease infinite;
animation: moving-images 400s ease infinite;
}
@keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}
@-moz-keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}
@-webkit-keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}
@-o-keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}<!DOCTYPE html>
<html>
<head>
<title>Growtopia Quiz</title>
<meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
<meta name="author" content="Julius Magpayo">
<link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<link rel="icon" type="image/png" href="gq.png" />
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="bg">
<center>
<div class="not">
<img src="logor.gif">
<h2>Welcome To Growtopia Quiz</h2>
<p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
<p>It also updates often to add more levels and features</p>
<a href='easypart1.html' class='button'>PLAY</a>
<br>
<h2>How To Save My Level</h2>
<p>The easiest way to save your progress is to bookmark it</p>
<p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
<br>
<h2>Is This a Scam?</h2>
<p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
<p>I don't and I won't ask for your password or whatsoever</p>
<br>
<h2>Level Progression</h2>
<p>You can easily skip levels but that's up to you</p>
<p>if you don't wanna have thrill in this quiz</p>
<h2>Suggestions? Problems?</h2>
<p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:[email protected]">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
</div>
</center>
</div>
</body>
</html>It would be great if the background is the only thing that moves. Thanks :)
For testing purpose. I have added the background image. I have added a new div with the class my_content to the page below your bg class and div You can change the background image URL according to you.
.not {
position:absolute;
bottom:20px;
left:0;
width:100%;
text-align:center;
}
.bg {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:url('https://www.tesla.com/sites/default/files/images/software_update.jpg') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
-webkit-animation: moving-images 400s ease infinite;
-moz-animation: moving-images 400s ease infinite;
-o-animation: moving-images 400s ease infinite;
animation: moving-images 400s ease infinite;
}
.my_content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
@keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
@-moz-keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
@-webkit-keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
@-o-keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
<!-- begin snippet: js hide: false console: true babel: false --><!DOCTYPE html>
<html>
<head>
<title>Growtopia Quiz</title>
<meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
<meta name="author" content="Julius Magpayo">
<link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<link rel="icon" type="image/png" href="gq.png" />
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="bg">
</div>
<div class="my_content">
<center>
<div class="not">
<img src="logor.gif">
<h2>Welcome To Growtopia Quiz</h2>
<p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
<p>It also updates often to add more levels and features</p>
<a href='easypart1.html' class='button'>PLAY</a>
<br>
<h2>How To Save My Level</h2>
<p>The easiest way to save your progress is to bookmark it</p>
<p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
<br>
<h2>Is This a Scam?</h2>
<p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
<p>I don't and I won't ask for your password or whatsoever</p>
<br>
<h2>Level Progression</h2>
<p>You can easily skip levels but that's up to you</p>
<p>if you don't wanna have thrill in this quiz</p>
<h2>Suggestions? Problems?</h2>
<p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:[email protected]">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
</div>
</center>
</div>
</body>
</html>