TUTORIALS | DROP DOWN MENUS |WEBSITE NAVIGATION | WEBSITE SIZE |BLOGS - HEADERS | BLOGS - BACKGROUNDS| BLOGS - CSS OVERRIDES

Add Custom Background

If you have an image that you would like to use as the background of your Blog, follow the instructions below. Please note that code provided below will create a tile effect for your background image.

Add Custom Header Graphic
First you will need to host your image and obtain the image URL.

To obtain the image URL:

1. Login to your Online Office.
2. From the Website Jump To menu, select edit.
3. Click the Add a New Page link.
4. Title the page and select Content Page as the Page Type.
5. Click OK.
6. When the screen refreshes, check the radio button next to hidden at the top of the page.
7. Click on Add Content in the Center Column.
8. Choose Add to Page beside Custom Content.
9. Choose a title and click Next.
10. Within the Content Editor, select the Insert Image icon from the tool bar.
11. Browse your computer for the image you are using for your blogs header graphic.
12. Double click the image when you locate it on your computer.  Windows Internet Explorer will verify that the photo has been uploaded, click Yes. 
13. The recommended header graphic size is 804 pixels wide and 221 pixels high. You can adjust the size of the photo within the Image Properties screen.
14. Copy the URL  and paste it into a notepad for safe keeping.
15. ex: http://media.point2.com/p2a/htmltext/b964/7f47/ef75/18d9bb8511d52f592471/original.jpg
16. Click OK
     

Now you will have to go to your Blog Dashboard to complete the process.

1. From the Blogs drop down menu, select Edit.
2. Ensure that you are using on of the Paperclip themes.
3. Under the Global Settings menu, click on Change how My Blog Looks.
4. From this page, you will see the theme that you are currently using, if it does not specify that you are using a Paperclip theme choose one from the menu.
5. Click Save.
6. Click on Administration from the blue horizontal menu.
7. Then, from the menu along the left, click on blogs, then again on Default Settings.
8. Check the box beside Enable Blog Owners to add content to HTML Head.
9. Now, click on My Blogs from the blue horizontal menu.
10. Click on Global Settings, then again on Change How My Blog Looks.
11. Click on the CSS Overrides tab.
12. Enter the following code:
    _____________________________________________________________________________________
     

    [STYLE type=text/css] [!-- body { background-image: url('Your Image URL goes here'); } --> [/STYLE]                                                           #left menu {float:left; overflow: hidden; padding: left: 5 px; width: 100 px }

    **To deter the website from reading the CSS code instead of displaying it, we've had to alter some of the brackets.  Please replace the following characters once this code has been pasted into your CSS Overrides screen. '[' with '<' ']' with '>'   Also, ensure that you enter the URL of your image in place of 'Your Image URL goes here'

    ______________________________________________________________________________________
     
13. Click Save.