This question was asked in our Support Group: How do I add a background that stays "fixed", or doesn't move with the page?

There are two ways to do this, depending on how you added your background image to your Ning Network.


Fixed or Scroll - Sets whether a background image is fixed or scrolls with the rest of the page.


Background Uploaded via Design Studio Panel: My Network/Settings/Appearance/Customize/General/Page Background, follow these steps:

  • Add the following code to your Advanced Code Box via: My Network/Settings/Appearance/Advanced/ADD CSS
  • body {background-attachment:fixed!important;}
  • SAVE - Your background should stay fixed.
  • NOTE: If this does not work for you, you will need to override the Ning Theme Settings by uploading your background image via the File Manager, and use the method below.

Background Uploaded with image URL via: My Network/Settings/Appearance/Advanced CSS:
  • If you used this method to upload your background image, within your Advanced CSS code you will find code similar to this:
  • body {
    background:#000000 url("http://yourimage.jpg") no-repeat scroll center top!important;}
  • Change the word "scroll" to "fixed" - now your background should stay fixed, and will be positioned at center top.
  • Your final code should look similar to the following:
  • body {
    background:#000000 url("http://yourimage.jpg") no-repeat fixed center top!important;}
  • SAVE.

Extra Notes:
Replace the URL with your image URL. Change the background color to whatever color you want to show, behind your image.
#000000 - black
#FFFFFF - white
transparent (do not use # for this setting)

Tags: background, fixed, fixed background, scroll background

Views: 922

Replies to This Discussion

Code Example above:
body {
background:#000000 url(http://yourimage.jpg) no-repeat fixed center top!important;}

Try changing the no-repeat, to repeat-x

Let me know,
Remove the no-repeat.

Or, give me the link with this installed, and I'll take a quick look.
Very nice! One thing though, and critical for user experience. I could not close the pad, without pressing F11 to remove all tools at top of my browser, in FireFox. That's how I finally found the X to close the box.

Looks great,
Thanks Jen, this was exactly what I needed. Our regular website has this effect and I wanted to add it to our Ning site as well for continuity. Here's the final result Super Parenting Social Network.

Great! Happy it helped.


Was searching for the code I had years ago from Ernie. Thanks for this Jen. Works perfectly!

Far as I can see, you haven't done anything wrong. This code will make the body background stationary as you scroll. That's what it's doing for me in all browsers.

Best Regards,


If anyone else is having issues in FF:

I use a single smaller pic (loads faster) that stretches great in chrome but not in FF. I can get it to scroll in FF only if I remove the no-repeat and add ;background-size: cover; or ;background-size: 100%; before the background:#000000 (Otherwise, it just loads a white background). The only downside is that it shows as tile instead of stretching in FF. Certainly one of my favorite tips. I'll update if I can figure it out.




I just looked and played around with the code, and a little too much going on to figure it out. It seems to me it has something to do with cover - maybe something missing?

Good luck with it,


Just wanted to say thank you for this code used it on our site works great! You rock Jen. -Wink-

Great!  Thanks for the nice feedback. =)


Need a Self-hosted Ning alternative?

The SocialEngine Team has created an Import Tool for Ning 2.0 Sites.
Self-hosted & 100% White Label:
SocialEngine PHP is hosted on your own server where you have complete control over your community.

Blog Posts

Gum Disease Treatment

Posted by Discovery Dental WA on October 1, 2015 at 5:43am 0 Comments

Treating gum disease can be accomplished in a number of ways, and whether it'll be an easy or difficult task depends on several things, beginning with one's health. There are a variety of treatments for gum disease depending on its severity, your…


About - Fidelus Technologies LLC

Posted by Fidelus Technologies LLC on September 29, 2015 at 1:31am 0 Comments

About - Fidelus Technologies LLC

We are Fidelus. We make the complex simple. Fidelus Technologies LLC is a leading provider of Cisco Unified…


Three Things You Can Do to Get More Out of Cisco WebEx

Posted by Fidelus Technologies LLC on September 28, 2015 at 5:26am 0 Comments

Summer is almost here. And for today’s corporate workforce that often means more frequent work-from-home days, working vacations and other circumstances that call for a WebEx meeting. With that in mind, we thought it might be a good time to…


Repairing and Replacing Laptop Keyboard Keys

Posted by Replacement Laptop Keys on September 28, 2015 at 5:06am 0 Comments

Owning a laptop or notebook computer is essential for many people. Whether it is used for work purposes, Internet surfing, video games or other entertainment is irrelevant. However, one thing is very important; you need the PC or Mac laptop to…



© 2015   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips