Themes

Which theme are you using?

Depending on the theme, this is one way you can do this.

1. First you need to add the container to hold the wheel in place. So enable Edit settings in Front page, and then Edit the Site Topic area and ADD the following into the HTML part of the editor.
   <div id="box">
   <div id="wheel"></div>
   </div>
   
   
2. Next use the ADD BLOCK to create a HTML block
   
3. Edit this new block and add the wheel.png save and close the block
   
4. Next open the block again and then click on the HTML editor section
   where you should be able to see the code for the image. Hightlight and copy and paste the URL for the image into Notepad and save it for later. Close the Block again.
   
5. Next copy and paste this CSS to Notepad and save it for later, but don't forget to add the image URL (where highlighted) in this CSS ... (the example URL highlighted in yellow, is the one I used while testing this tutorial, and is therefores, only relevent only to my localhost server, but yours should look something similar)
   
       <style type="text/css">
   
       #box {
         position: relative;
         width: 400px;
         height: 400px;
         margin: 150px auto;
   }
       #wheel  { /* with animation properties */
         background: url(http://localhost/moodle/draftfile.php/5/user/draft/750396728/logo.png) 0 0 no-repeat;
         position: absolute;
         top: -100px;
         left: -100px;
         width: 400px;
         height: 400px;
   
         -webkit-animation-name: spin;
         -webkit-animation-duration: 40000ms; /* 40 seconds */
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-timing-function: linear;
   
         /* mozilla ff */
         -moz-animation-name: spin;
         -moz-animation-duration: 40000ms; /* 40 seconds */
         -moz-animation-iteration-count: infinite;
         -moz-animation-timing-function: linear;
   
         /* microsoft ie */
         -ms-animation-name: spin;
         -ms-animation-duration: 40000ms; /* 40 seconds */
         -ms-animation-iteration-count: infinite;
         -ms-animation-timing-function: linear;
   
   }
   
   @-webkit-keyframes spin {
     from { -webkit-transform: rotate(0deg); }
     to { -webkit-transform: rotate(360deg); }
   }
   
   @-moz-keyframes spin {
     from { -moz-transform: rotate(0deg); }
     to { -moz-transform: rotate(360deg); }
   }
   
   @-ms-keyframes spin {
     from { -ms-transform: rotate(0deg); }
     to { -ms-transform: rotate(360deg); }
   }
   </style>
   
   
6. Next all depends on your theme. If there is a Custom CSS Settings page you can add the CSS there, but without the <style></style> tags.
   
7. Or if your theme has no Custom CSS settings page then add all of the code as previously shown above, with style tags included, and paste into the HEAD section of...
   Site Administration > Appearance > Additional HTML
   Then SAVE it.
   

Check out your frontpage and you should see the wheel.

Hope this works as it did in my test today.

Cheers

Mary

PS: I forgot to say you can safely remove the HTML code from the HTML block, by going into the block when editing and open the HTML section then just copy and delete the code.
 And then save just adding a simple word like image.
 Save and then you can hide this block, until you need to add another image someother time.

Mary