Skip Navigation

Photo on cover page

Travel Forums System Talk Photo on cover page

1. Posted by BeeGood2 (Budding Member, 2 posts) 10 Mar '14 08:24

How do I put a background photo on my cover page to personalize it for our trip.

2. Posted by Peter (Admin, 5417 posts) 10 Mar '14 16:39

Hi Beegood,

You can tweak the CSS of your blog to add an image in the background of your header. This is in an involved process though. I can give some tips, but which template are you going to be using for your blog?

3. Posted by BeeGood2 (Budding Member, 2 posts) 10 Mar '14 18:27

Quoting Peter

Hi Beegood,

You can tweak the CSS of your blog to add an image in the background of your header. This is in an involved process though. I can give some tips, but which template are you going to be using for your blog?

I thought I would use the postcard template that I chose I settings but after I select it I can't seem to be able to move it to my cover page.

4. Posted by Peter (Admin, 5417 posts) 10 Mar '14 20:16

I'm afraid I'm not really sure what you mean by that. Once you have selected a template to use, you don't need to "move" anything - it just applies to your whole blog.

To be honest, that's a pretty hard design to customise with your own image. But it would be possible to some extent, particularly if you're capable with Photoshop or something similar. So I'll explain it below and you can choose to do it if you like or just leave the template as is.

Here's how I would do it:
1. Download the existing header image (this is it here)

2. Open that file in Photoshop. Ensure the sizes stay the same.

3. Add in any image you want. As an example, I did this one with my head in it

4. Upload that file to Travellerspoint

5. Find the url for the file. This can be done by clicking on the photo after upload and then right-clicking on the image to "Open Image in New Tab" (wording depends somewhat on the browser you're using). You then need to copy the url of the image.

6. In your blog template settings page, click on the link to "Customise this template" which shows on your current selection.

7. You will see a text area with style rules (known as CSS). Look for this line directly under the Header section:

#header {padding-left: 90px;height: 118px;background: url(img/8/header.jpg) no-repeat;}

8. Replace the img/8/header.jpg url with the url of your custom image. It ended up like this for my custom header:

#header {padding-left: 90px;height: 118px;background: url(http://photos.travellerspoint.com/1/large_me.png) no-repeat;}

9. Hit submit and you're done. Here is my example one

The key to making this look good is ensuring your header image actually fits within the overall design.

I hope it helps. If it's too complicated, it's probably best to just stick to the template in its default form.