Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...

VIP Ning Club
About VIP

~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!
Join Now!
Directory

Social Network Directory
Network HELP

Friends helping friends...
Free Ning Tips

Free Ning Network Tips

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

Favorite

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 Kingdomz X Extreme A&E 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

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

Welcome to
JenSocial: Social Network Directory / Social Web Directory

Sign Up
or Sign In

Or sign in with:

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

JOIN NOW!

Join the JenSocial Premium Ning Tips Club

All the work/tips created on JenSocial.com are provided free, but your donations allow me to continue offering Free Support, Tips, News, and free Directory Listings. Any amount is greatly appreciated.


Twitter	Facebook

Welcome to JenSocial Network Directory: Social Network Directory and Network Creator Hub for all Social Networking platforms:
Ning, Spruz, SocialGO, Grou.ps, JomSocial, BuddyPress, WackWall, etc...

Formerly the Ning Directory

Add Your Social Network, Find, Preview and Join, all kinds of great Social Networks (Social Communities) - - from Art to Pets!