Recently many bloggers have found their Blogger Header image shrunk down or in some cases disappeared altogether. While the Blogger Team is on the case and working out a fix here is a working solution.

Previously the methods used to put images in the header varied from putting a picture page element in the header to adding a picture URL in the CSS code for the header. Since Blogger introduced the direct image upload to header which makes use of a separate class to house the header image we have to use the second method here.............



REMOVE THE ORIGINAL IMAGE

The first step is to remove your shrunk image. For this login at Blogger.com and click on Layout link on the Dashboard. On the Page Elements tab which opens click the Edit link on the Blog Header widget. In the popup window remove the image and save.




UPLOAD IMAGE OR GET IT'S LINK

Upload your image to a free host like Photobucket.com or Googlepages and copy down it's link. You can also upload to a Blogger post but extracting the image link is tedious and not recommended as there are more chances of getting errors.




MODIFY THE CSS CODE

The last step is to modify the CSS code in your template. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down in template code box to this code :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Add the following lines to it :

background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;

So that it looks like this :

#header-inner {
background-position: center;
background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;
margin-left: auto;
margin-right: auto;
}

Replace LINK_OF_IMAGE with actual link of your uploaded image. Click on Preview button at bottom of Template box to increase the height from '300' if necessary. If full width of picture is not seen add the width line below the height line in the above code like this :

width:400px;

Again use Preview to see and adjust the width. Save Template. Clear the cache and view Blog.




IF YOU HAVE A 'STRETCH' TEMPLATE

If you have a stretch template use this code :


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
width:XXXpx;
height:YYYpx;
}


Change XXX and YYY to the width and height respectively, in pixels, of your image.