JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Scrolling and Background is Stationary (Fixed) - Updated 9/17/2011

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)

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on January 27, 2010 at 7:18am

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

Permalink Reply by JenSocial on May 1, 2010 at 3:34pm

Remove the no-repeat.

Or, give me the link with this installed, and I'll take a quick look.

Permalink Reply by JenSocial on May 1, 2010 at 3:52pm

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

Permalink Reply by Super Parenting Social Network on February 15, 2011 at 5:00pm

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.

Permalink Reply by JenSocial on June 15, 2011 at 1:29am

Great! Happy it helped.

Permalink Reply by Neuerotica on July 18, 2011 at 8:05am

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

Permalink Reply by JenSocial on September 5, 2011 at 8:38pm

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

Permalink Reply by Fire-Tech on September 6, 2011 at 9:53pm

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

Permalink Reply by JenSocial on September 6, 2011 at 11:27pm

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

Permalink Reply by Dark Knights Role Play Group on February 9, 2012 at 2:36am