Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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!

Other Ning Tips and Tricks You Might Have Missed:

 

STICKY TIP: MAKE YOUR NAVIGATION STICKY (FIXED TO TOP OF SITE ON SCROLL)

TIP: BEST TOOL FOR CREATING ANIMATED GIF WALKTHROUGHS

STYLE HACK: HOW TO HAVE DIFFERENT BACKGROUNDS FOR DIFFERENT GROUPS

TIP: RESPONSIVE MEDIA EMBEDDING 3.0

GIFT TO NCS: NING 3.0 DIMENSIONS INFOGRAPHIC

INFOGRAPHIC: DIMENSIONS FOR SOCIAL MEDIA DESIGN OF PROFILES

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Eva posted a discussion
41 minutes ago
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
2 hours ago
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"looks interesting"
18 hours ago
⚡JFarrow⌁ updated their profile photo
Tuesday
Kenny Craig updated their profile
Jun 8
Isabella Wilson updated their profile
Jun 5
Eva liked ⚡JFarrow⌁'s discussion What is going on with Ning? What Do We have to Look Forward To?
Jun 2
Eva liked Suave's discussion I AM LOOKING FOR DEVELOPER ASSISTANCE WITH ADDING AUTOMATIC MUSIC TO MY HOME PAGE
Jun 2
Alex - Rosas † Negras posted a discussion
Jun 1
Alex - Rosas † Negras posted a discussion
May 28
Alex - Rosas † Negras replied to Suave's discussion
I AM LOOKING FOR DEVELOPER ASSISTANCE WITH ADDING AUTOMATIC MUSIC TO MY HOME PAGE
"if you need I'm here, if you look in my discussions you will also find the playstil"
May 23
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Bizz ⚡JFarrow⌁ 
I'm sorry that many like us have worked so hard and given up, but at least I'm…"
May 23
More…

Meanwhile, you can check our social media channels