How To Make Your Backgrounds Scroll and Animate With Just CSS

posted Feb 13, 2014, 2:42 PM by Jaybird Farrow

How to Make your Background Images AutoScroll

Scrolling Background Images with 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 Advanced CSS:



body {
height:100%;
background-attachment:fixed;
padding:0px;
margin:0px;
background-image: url('http://api.ning.com/files/M6EoYmTnuquGVo5pCsYqPwljxvGK*K*v08kZrFsqfkWYI6UdvA5G8UKMh6ZJIxkyXqbf6EtsyUQfsHp5FoCGOQhUDmxkPcua/surveyors.jpg');
/*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%}
}



How to Find Help With Ning

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!

UPDATE:  You can now purchase Ning Add-ons and Ning Design Assistance in my store!


Tell Me What You Think

The gadget spec URL could not be found


Comments