Sweet Trick: Make Your Backgrounds Scroll and Animate With Just CSS

If you have been thinking about how to add a scrolling background image to your Ning network, but have not been sure how to do it, you're in luck! This example uses just CSS and a single image. Other similar solutions require javascript to work, but not this one! Place the following code into your Advanced CSS box and smile!

Scrolling Background Images On Your Ning Network. Example:

You'll want to replace my 'surveyors.jpg' image with your own.

Add this to CSS:

body {
height:100%;
background-attachment:fixed;
padding:0px;
margin:0px;
background-image: url('https://storage.ning.com/topology/rest/1.0/file/get/11390612?profile=original');
/*Change this url to your panorama image*/
background-repeat:no-repeat;
background-position:0%;
background-size:auto;
animation-name:backgroundanimation;
animation-duration:50s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:backgroundanimation;
-moz-animation-duration:50s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:backgroundanimation;
-webkit-animation-duration:50s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:backgroundanimation;
-o-animation-duration:50s;
-o-animation-timing-function:linear;
-o-animation-delay:0s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
@keyframes backgroundanimation {
from {background-position:0%;}
to {background-position:100%}
}

@-moz-keyframes backgroundanimation {
from {background-position:0%;}
to {background-position:100%}
}

@-webkit-keyframes backgroundanimation {
from {background-position:0%;}
to {background-position:100%}
}

@-o-keyframes backgroundanimation {
from {background-position:0%;}
to {background-position:100%}
}

I sincerely hope you not only find my tips helpful for practical use on your Ning network, but also consider them inspiration for doing more with your network to make it more exciting for your members (and yourself).

If you ever find that you need help with your Network redesign or simply adding some interaction to your network, send me a message on my profile or give me a call. I'm happy to help and look forward to seeing what you have done!

Replies

NC for Hire

⚡JFarrow⌁ October 29, 2013 at 2:22pm

you can also add this to a single page by adding it to an external style sheet
Allison Leahy October 29, 2013 at 4:20pm

Gorgeous!
- NC for Hire
  
  ⚡JFarrow⌁ > Allison Leahy October 29, 2013 at 5:02pm
  
  thanks..wish I could show you my example but it is on my sandbox (private) until migration, of course..
Fire-Tech October 29, 2013 at 5:46pm

Looks good bro. Thanks for sharing ;)
- NC for Hire
  
  ⚡JFarrow⌁ > Fire-Tech October 29, 2013 at 6:26pm
  
  thanks FT.... got some pretty cool stuff in the works..happy to share it..
Patrick Chappelle October 30, 2013 at 7:20am

Nice one, J!
- NC for Hire
  
  ⚡JFarrow⌁ > Patrick Chappelle October 31, 2013 at 11:14am
  
  thanks bro!
NC for Hire

⚡JFarrow⌁ November 1, 2013 at 2:18pm

if you combine this trick with the following tip, you'll have scrolling backgrounds on your hubs

STYLE HACK: HOW TO HAVE DIFFERENT BACKGROUNDS FOR DIFFERENT GROUPS
- Patrick Chappelle > ⚡JFarrow⌁ November 1, 2013 at 2:37pm
  
  Fantastic!
Mary Jane Peterson March 1, 2014 at 9:26am

Hi JFarrow

I think this is great :) could I use this on the wallpaper I got on the new theme , here is my site http://alwaysanopennetwork.com/ thank you for your help

of 2

This reply was deleted.

FORUM