Plus and Pro Subscribers

How To: Add Body Background To Specific Page

  • Go to new or existing page /pages.
  • Access the specific page.
  • Click on Top Right Menu - Options/Edit.
  • If you haven't customized the page yet by utilizing the new Advanced Features,
  • - -> Check box next to Meta: Manage title and meta tags manually (advanced)

 

 

 

  • Add your CSS styles in Custom Box.
  • For any CSS style, wrap in style tag. <style>your custom css for specific page </style>
  • Upload your background image via File Manager or a Blog.
  • Copy the image URL.
  • Edit code below, and replace your_image, with your image URL.
  • Be sure to use repeat-x (horizontal repeat) or repeat (repeat horizontal and vertical), if needed for your background image.
  • Click on Update Page.
  • Done! =)

 

 

<style>
body {
background: url(your_image) no-repeat scroll 0 0 !important;
}
</style>

 

Enjoy,

Jen

Tags: add background to page, background, background image, page, page background

Views: 552

Replies to This Discussion

Great thanks!  

Kinda unrelated, but I've been going through my pages and adding <meta name="keywords" content="keywords related to my page">  to the meta description box.  Am I placing them in the right place to be effective?

 

You're placing them in the right place, but the question is: do we just enter the words, or the full meta tag? Honestly, I don't know. When I test this, I'll let you know. Before you enter a lot though, I'd ask Ning. One way would be to view source on the page, and make sure the meta tags look right.

Best,

Jen

I just looked, DOH. You add the entire meta tag. ;-)
Cool thanks!

Katie,

My pleasure, easy tip really. Did you receive your notification about the new VIP tip? You'll probably appreciate this one in particular:

http://jensocial.com/group/premiumningtipsbyjen/pages/ning-backgrou...

Best,

Jen

Hey Jen,   I didn't know this obviously, but looks like I'm wasting my time adding metatag keywords http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-...

 

Hey Katie,

I don't agree. And this is why. Those keywords will help on searches, in a huge way. Here's the deal though. They don't seem to be "taking". The other day I could have SWORN I was adding keywords directly in the meta description box like this:

<meta name="keywords" content="dfp on ning, ning ads,  serving ads on ning, manage ads on ning" />

Now today, just a bunch of gibberish when I save and view page source. What about you? Am I just tired and doing something really blonde? ;-)

Thanks,

Jen

 

Glad to know your thoughts on their effectiveness, I will keep adding them.

Mine is there when I view source.  Its the last line before the </head>

Its not putting it up with the other metatag stuff though, does that matter?

 

Jen, I did NOT understand what this feature did when it was announced by Ning, but YOUR instructions have made everything all clear! I tried this and I LOVE IT!!

One question: Every image I add to the background is too narrow (and I'm using wallpaper sized images). Do you know the exact width the image has to be? For example, your blue sky/cloud one is the perfect size and would work on my pages.

SQUEE! Love this tip and I'm so excited to spruce up my pages! Now I just need that size! :)

Glad the overall instructions helped. It gets really complicated on widths, sorry to say. It's due to all resolutions. My clouds are repeated in the horizontal direction with repeat-x. And here's the kicker, they have to be a "seamless image", meaning that they repeat without jagged edges. I created the clouds from scratch, and even for me it was a bugger to make them seamless.

Sorry, wish I could help more. It is different for every case. For example, on PetBrags I have an image at top and faded it out gradually at bottom. Then I use a background color, using repeat-x only for image. My background is the same color as bottom of image. This way it has a smooth transition at bottom. You can try a huge image that is wide enough for all resolutions, but can take a good deal longer to load. It's a real art to get background images to flow correctly.

 

Bottom line: if you're using a tiled image, it's already seamless in most cases, and you use "repeat". Otherwise, you have to Google seamless, and really work with it.

Best,

Jen

If I were to use a rather plain background (no images, just a vague texture type image) what code would I insert to tile it?

Thanks!

You say no image, but you say image, lol.

<style>
body {
background: url(your_image) repeat scroll 0 0 !important;
}
</style>

RSS

Blog Posts

A Picture May Be Worth 1000 Members

Posted by Laura Occhipinti on September 20, 2014 at 7:51pm 1 Comment

Take pictures at EVERY event that you host for your group.  Do not…

Continue

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips