Adding a Background Picture to Your Blog Header

Make Money Online Blogging


A nice looking blog might increase your visitors and the amount of moneyyou make online but probably won't so ignore this old post !

I thought my blog might benefit from a bit of added colour so I decided to see how easy or difficult it would be to add a background image to the blog header. It turned out to be remarkably easy. The picture I chose is of the Millau bridge in southern France, the highest bridge in the world, which is 2.5 km long and about 1000 feet above the floor of the Tarn valley and above the clouds. (Check out the videos in the right-hand column). A quite remarkable feat of engineering and rather conveniently just the right shape for a blog header ! How considerate of them.

I first of all have to thank 'Tips for New Bloggers' a site with a load of useful stuff for tweaking your blog (see link) for describing how to do it

First you need to find an image and crop it to size - theoretically around 660x150 pixels, but I found I had to change the size of the box to adapt it to my image which is only around 580 pixels wide. If you don't have any photo editing software I can recommend Picasa (because it's free)

Once you have found the image you want you need to upload it to a free picture host - I use Photobucket (NB : you can also use Photobucket if you list stuff on Ebay - the first photo on Ebay is free but after that you have to pay around 10p (20c) for every picture and it soon adds up - with Photobucket you can have as many pictures as you like on Ebay for free - so save yourself some money !)

Once you have uploaded your picture to Photobucket or whichever service you decide to use, you need to copy the URL link (in Photobucket this is right underneath the picture). Now back on your blog (this applies to the 'new' blogger) click on 'Customize' then on 'Template' then on 'Edit HTML', in the HTML code scroll down until you find this

#header-wrapper {


margin:0 auto 10px;

border:1px solid $bordercolor;

Between the last line and the bracket add the following line

background-image: url(URL address of your image);

except, of course, you need to put the actual URL address of your image in between the brackets and leave the brackets Click on save and have a look at your header, hopefully it will have your image in it, if it doesn't well you've done something wrong !

If you find that the image doesn't quite fit then you can go back into the HTML code and change the width number in the line - width:660px; - I had to change it to 580 - alternatively you can try changing the size of the image or looking for a longer picture.

So that's it, quite easy really when you know how, so thanks again to TFNB. If you want to know how I get the ads. at the bottom of my post you need to read Incorporate Your Ads

No comments:

Post a Comment

Mmmmmmmmmmmm comments ! Please say something apposite, inspiring or witty or pointless or all 4 together !

Note: only a member of this blog may post a comment.