How to create a simple moving background image

[Thomas Handorf]

This can be achieved with simple css code. Choose an image that is bigger (at least left and right) than the current view. You can resize the image, but you need to do this with the width and height input fields in the property editor on the right.

Then find the object id of the image by looking at the link menu on the right and look for something like "Address of this element ./home#1234". In this example the id would be 1234 on the "home" view.

Then open the hacker-shell by pressing CTRL-M or Cmd+M. In the "CSS" tab insert the following code:

/*for Chrome*/
@-webkit-keyframes leftright { /*move object from left to right*/
  0% { /* start position */
    -webkit-transform: translateX(-50px); /* move 50px left from original position */
  }
  100% { /* end position */
   -webkit-transform:translateX(50px);
  }
}
/*for Fire Fox*/
@-moz-keyframes leftright {
  0% {-moz-transform: translateX(-50px); }
  100% {-moz-transform:translateX(50px); }
}
/*for Internet Explorer*/
@-ms-keyframes leftright {
  0% {-ms-transform: translateX(-50px); }
  100% {-ms-transform:translateX(50px); }
}

This defines a CSS-Animation moving an object between 50px left of its original position and 50px right of its original position. Now this has to be assigned to the background image object. Insert the following code also to the CSS tab.

#obj1234 {
-webkit-animation: leftright 20s infinite alternate;
-moz-animation: leftright 20s infinite alternate;
-ms-animation: leftright 20s infinite alternate;
}

This applies the animation to the object with id 1234. So replace 1234 with your actual image id you determined before. The animation will run 20s and will be repeated infinitely. 

Note: always include all above code including the properties for different browsers (i.e. -webkit-..., -moz-..., -ms-...) not only for the browser you are currently working in.

Note2: due to a current limitation in CSS you cannot rotate or scale when you use this animation (changing width or height of the image as mentioned above is fine)