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.
Examples:
#000000 - black
#FFFFFF - white
transparent (do not use # for this setting)

Tags: background, fixed, fixed background, scroll background

Views: 867

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,
Jen
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,
Jen
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,

Jen

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.

 

Chrome

FF

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,

Jen

Just wanted to say thank you for this code used it on our site works great! You rock Jen. -Wink- http://underworldrp.ning.com/

Great!  Thanks for the nice feedback. =)

RSS

Blog Posts

Membership Dues: Why You Need To Charge Them And When To Start

Posted by Laura Occhipinti on August 6, 2014 at 9:09am 0 Comments

So you are starting a group (or maybe you already…

Continue

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips