Need help making the position of an infinite animation sticky

[Twhitett]

Hello everyone!

I am having trouble with a webpage of mine I want to submit to www.CSSZengarden.com. I am trying to get the spinning earth's animation position to be sticky so that it scrolls up or down with the page. I had it at one point, however, in my attempt to figure out how I did it, I broke it (big sad face). Right now the earth animation is at the very bottom of the page. I have attached the files below with just the main bits and pieces, if I tried to attach everything the file size ends up being a little over ten thousand megabytes, which is a tad too big to upload. And if I end up submitting this to CSSZengarden, I will mention those of you that helped me in the citations section of my CSS file.

That being said I would appreciate any help with this project as it continues to be a pain in my neck (for lack of better words...). Any help, comments, questions, and/or compliments would be much appreciated. Thank you in advance.

BTW for those of you who have not heard of CSSZengarden, check it out. This website has examples of differently styled webpages that all use the exact same HTML code, but are different due to their manipulation of the CSS file. So if you are looking for some fun CSS applications, this website has several fantastic examples of how to style webpages by only changing the CSS.

If the file download does not work, I have the page published at https://zengineer.twhitet.com/

 

[MeMate]

Well, put the css within codetags here.

Usually you may use

position:fixed;

to achieve that.
Maybe your earth wont work anymore after that change. In that case wrap a div element around it.

Example:
CSS

#divwrapper{position:fixed; left:5%; top:5%;}

HTML

<div id="divwrapper"><div id="yourspinningearth"></div></div>