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! =)



body {
background: url(your_image) no-repeat scroll 0 0 !important;




Views: 636

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.



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


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



Hey Jen,   I didn't know this obviously, but looks like I'm wasting my time adding metatag keywords


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? ;-)




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.



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?


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

body {
background: url(your_image) repeat scroll 0 0 !important;



© 2016   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips