Replace Page Header Title with Background Image

[Jen]

Replace Page Header Title with Background Image

Click To See Example Page

This tip will show you how to replace a Ning Page Title Header with an Image. I would call this a tip for newbies. I hope someone enjoys it. It will give you an idea of the control you now have over your Ning pages. Bottom line: You now have the power to customize your pages to the extreme, thanks to the latest features Ning added for Page control.

• Select/create your Page Header image. Suggestion: Do not exceed 60 pixels in height and 600 pixels in width.
• Upload your image to your Ning Network via File Manager or a Blog.
• Copy the image URL, for code below.
• Edit code below by changing the sample image URL "mynewpagetitle.png" to your image URL.
• 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)

 

Code to Edit:

<style>
div.xg_headline div.tb {text-indent:-1000px;height:55px;background:url("mynewpagetitle.png") no-repeat;}
</style>

 

 

 

• Add your edited code (CSS styles) in Custom Box - - where you see red arrow above.
• Tip: For any CSS style, wrap in style tag. <style>your custom css for specific page </style>
• Click on Update Page.
• Done! =)

Enjoy!

Jen

[John]

That's sneaky moving the text 1,000 pixels off screen {text-indent:-1000px}

Pretty darned awesome.

[Jen]

LOL, yep, the way to do it - - to my knowledge at least. ;-)

[Jen]

Glad you like it!

[Jen]

Glad you like it!

[⚡JFarrow⌁]

smooth move twinkle toes ;)

[Jen]

=)

[Jen]

Alex,

No, we can't make it clickable with CSS. It would take special script.

Best Regards,

Jen

[Elli C]

My tip of the day, make sure you indent the right thing! I accidently moved my tabs not my header when I did this. Took hours and a screen reader to reset the site and then rebuild. An important lesson learnt - PREVIEW is your friend!

[Jen]

Oh wow, not fun. Sorry that happened to you.

Best,

Jen

[Elli C]

It was my own fault, I was learning on a live site which was a very silly thing to do.

Have you any ideas how I can get my page to be the same size as the screen? I never realised the picture stops until I accessed it of another computer!

[Jen]

Adding the right background image is a learned process, not something I can give 1-2-3 steps. It will be unique to each site and it's background image, and multiple screen resolutions. I can give you a few tips as a head start. Google words like "background image size", "background image for different resolutions", etc...

This discussion may help:

https://creators.ning.com/forum/topics/adding-a-background-image

 

There are also some background image stretching techniques using jquery. I offer one in my VIP group on JenSocial. You can Google "full background image". Those get ugly if you stretch the image too much.

 

The ideal situation is to have a background that is either a seamless tile, and repeat in x and y directions. Or, to have a background with faded edges, and apply the color of edges as the background color.

 

The simplest way, yet not very professional, is to repeat the background in x direction with repeat-x, and apply position:fixed, so the screen doesn't scroll up/down, therefore taking care of y or vertical direction.

 

Learn about CSS background attributes here:

http://www.w3schools.com/css/css_background.asp

 

Happy learning,

Jen