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)

Tags: background, fixed, fixed background, scroll background

Views: 711

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 Kingdomz X Heavy Metal Ent. 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 Thyselfknown.com on September 5, 2011 at 5:50pm

Hey,

 

I have added this code to my network however, it looks different in the middle section.  I'm not sure what I have done wrong.

Any help with this would be wonderful, thanks!

 

Site Link

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

FF

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 Underworld Role Play Group on February 9, 2012 at 2:36am

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

Permalink Reply by JenSocial on February 9, 2012 at 9:29am

Great!  Thanks for the nice feedback. =)

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips