Add Body Background To Specific Page

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: 521

Replies to This Discussion

Permalink Reply by GirlRiders on July 7, 2011 at 7:04am

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?

 

Permalink Reply by JenSocial on July 7, 2011 at 11:49am

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

Permalink Reply by JenSocial on July 7, 2011 at 1:35pm
I just looked, DOH. You add the entire meta tag. ;-)
Permalink Reply by GirlRiders on July 7, 2011 at 6:29pm
Cool thanks!
Permalink Reply by JenSocial on July 7, 2011 at 9:03pm

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

Permalink Reply by GirlRiders on July 8, 2011 at 10:15pm

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-...

 

Permalink Reply by JenSocial on July 15, 2011 at 11:41pm

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

 

Permalink Reply by GirlRiders on July 17, 2011 at 8:06am

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?

 

Permalink Reply by Writer Chick on July 7, 2011 at 11:31am
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! :)
Permalink Reply by JenSocial on July 7, 2011 at 11:55am

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

Permalink Reply by Writer Chick on July 7, 2011 at 2:34pm
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!
Permalink Reply by JenSocial on July 7, 2011 at 2:36pm

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

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

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips