Honey, Blogger Shrunk my Header! ~ The Blog Doctor.
Loading...

Honey, Blogger Shrunk my Header!

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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.


Enjoy!

52 comments:

Anonymous said...

Oddly I seem to have a different problem, 2 problems actually.

#1, My blog header is fine, so as long as one puts the image behind title and description. However, if one selects image instead of, then my blog header goes double it's original image.

#2, I don't see this piece of code anywhere on my blog.

Question: If I were to manually input this code back in, where exactly would it go or could I just customize and add a page element?

Vin said...

Anonymous,

What is your blog address?

Cranky said...

my blog template is sanddollar and the html does not look like the code you posted. this is how it appears for me:
#header {
padding-top:0px;
padding-$endSide:0px;
padding-bottom:0px;
padding-$startSide:0px;
margin-top:0px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0px;
border-bottom:dotted 1px $bordercolor;
background:$descbgcolor;

i would like to the picture (a panorama) to fill the entire page. the pics i upload normally are not centered, but hang on to the left margin to about 2/3 across at most. i'm a newbie, if this is too specific you can ignore it. thanks

Vin said...

Cranky,

The sanddollar template is a fluid template which means it resizes to fit the viewer's screen resolution.

An image has a specific width and it may fill the entire width of your screen but would look distorted on other screens with a different resolution.

What is your blog address?

Smiler said...

Hi Vin,

I made the changes you suggested and it's working, only problem is I already have my title included in my image and now the title and description are on top of my image! What should I do next?

Vin said...

Smiler,

You can hide the Title and Description :

Hide Blog Title and Description

Jimpa said...

I hope blogger fixes this thing, it's pretty annoying..
thanks for the help

Vin said...

Jimpa,

Have a look at :

You Blog We Listen

Swany Photography/Web Design said...

I'm having some code issues with my blog layout over at http://ransomnotenews.blogspot.com/

I was wondering is you could guide me in the right direction... My footer isn't expanding with the new posts..

Thank you for your help

~Swany

Vin said...

Swany Photography/Web Design,

More details would be helpful. What do you mean by 'expanding'? Is it the post footer or the blog footer?

You can email me directly at :

drbhatns[at]gmail[dot]com

StickyGooeyCreamyChewy said...

I really appreciate this advice. Unfortunately, this did not work for me. I inserted the code you gave, but there was no image in my header at all and my blog title was all messed up too. I have spent so many hours on this already. I am ready to jump out the window! Why doesn't it work in the Layout section, like it is supposed to?

I have the Minima Stretch template and I am also unsure what size my image needs to be to fit into the header.

My blog url is: http://stickygooeycreamychewy.blogspot.com. Can you help?

Anonymous said...

Vin:

What is a "STRETCH" template? stickygooeycreamychewy talks about the Minima Stretch template (I know Minima template only...)
I need to understand this to change the code in my blogs templates: Minima and Douglas.
Thanks for your help.

Laura

Vin said...

Laura,

A 'STRETCH' template is one which resizes the blog fluidly to match any resolution of the computer screen from the older 800 by 600 to today's wide screen monitors.

You can find the stretch templates in Blogger's Pick New Template tab. THey are indicated by the word 'stretch' as in :

Minima Stretch.

Also see :

Fluid Width Three Column Template

Cathy Hengst said...

I am going to go crazy trying to fix this. I would like to be able to strech my image the full width of the page and can not find the code etc. My blog address is http://cathyhengstphotography.blogspot.com/ I have changed the width is PS etc and it seem to adjust it when I upload to blogger.

Thank you!

Vin said...

Cathy,

You are using the Minima Stretch Template. This is a fluid width template and it can accomodate an image of any width.

I can see the full width of the image. If you want to cover the full width of the page find out the width of your monitor by going into Display Properties-->Settings tab.

Then on your PC resize the image to that width in an image editor like Paint. Then remove the image which is on now and upload the new resized image.

Cathy Hengst said...

Thank you so much for looking at that. The image in photoshop is sized at 11in x 5.4 in. On my Monitor it is only 8 3/4 x 4 3/4. This is the size it seems to make all the images no matter what size I have them in photoshop.

Vin said...

Cathy,

Check the image size in pixels in Photoshop.

On PC go into Display Properties via Control Panel and on Settings tab lower left will be resolution in pixels.

Cathy Hengst said...

OK so the image that is up there now is 3300 x 1620 in PS. When I look at my computer under settings etc it is set to 1152x864.

The thing is on all computers the image is not the full length of the screen. And from the pixel dimensions it should be. I think and very well may be wrond that blogger is limiting that header size? I entered it where it allows you to browse your computer and them choose the image.

Thank you again for your help

Carrie Walker said...

Vin, Thank you for taking the time to help all of us. I have been working for hours on my blog header and I just about have it finished. The only thing holding me back is the image size. It just looks too small. I have tried resizing it on photoshop and then uploading it into blogger but no luck. My blog address is:
http://beautifulonephotography.blogspot.com/
Can you help? Thanks so much.
Carrie

Vin said...

Carrie,

It looks OK in Firefox2. The size of the image and that which shows on the blog are the same.

If you want to check try uploading another bigger image.

debbie ( beckmoore) said...

IF YOU HAVE A 'STRETCH' TEMPLATE
Help
I followed the directions from the above post and my image is still a mess!
thank you so much
Debbie
Beckmoore

Cathy Hengst said...

So I went and changed the image and same thing UGH.. This is the HTML is there something missing that is limiting the space so it is not the full width of the template?

/* Header
-----------------------------------------------
*/


}

}

#header h1 {
margin:2px 2px 0;
padding:20px 25px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Vin said...

Cathy,

I would leave it as it is. The Minima Stretch is a Fluid width template which resizes according to the viewer's monitor width.

What may appear not good on your monitor lokks excellent on mine at 1280 px width in Firefox 2.

Vin said...

debbie ( beckmoore),

I can see the image in the header. Looks OK to me in Firefox2! Try clearing the cache. See :

Clear Cache

Jennifer said...

Vin,

Could you take a peek at my header for both of my blogs? I, like the others are having problems with the size. I tried making it larger, but it just doesn't seem to work. The picture on http://jacksbox4you.blogspot.com use to fill the entire header but now I can only get it centered. If I try and make it larger, it goes to the left. The pic size orginally is 900 x 537. Any Ideas?

The second blog http://carjackproductions.blogspot.com has a similar issue with the sizing. This picture is 375 x 564. Thank you for any advise/help you can give.

Herbert Wong said...

Hi Vin,
I have a slightly different problem. My blog is http://travel-and-photography.blogspot.com/
(the photo had been widened using the method described below).
It is a 3 column site and I have increased the outer wrapper to
1025px, divided them as follows:
Main wrapper: 540 px
2 side wrappers 220 px respectively
However when I uploaded a photo of 530px to fill up as much of the
main wrapper as possible, it only appears as a 400px image.
I have to manually pull the image in post edit to fill up the main wrapper but this is unsatisfactory as this either distorts my photo or I have to do so by trial & error to get the right size in.
How can I fix it so that I can fill up as much of the main
wrapper space as possible?
Thanks.

Vin said...

Jennifer,

Both the blogs are using the Minima Stretch template. This is a fluid width template which resizes the blog columns according to the viewers' monitor widths.

What this means is it may appear to you that the image is not filling the entire header while at 800px monitor width it looks like it does :

http://ezeeblog.googlepages.com/Jacks800.jpg

On my monitor which is wider it looks like this :

http://ezeeblog.googlepages.com/Jacks1280.jpg

So as it is difficult to cater to every monitor width I would advise to let it be as it is. You can remove the header border lines by modifying this code :

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Change 1px in the border lines to 0px and save. This will remove the effect of empty space next to image on wider monitors.

Vin said...

Herbert Wong,

Why not use the method described in the post above?

Jennifer said...

Thank you for your input. I was just hoping that there would be some way to make the header boarder wrap around the picture like a frame on both of my blogs. Do you know if that is possible?

Thank you for your time and patience with all of us.

Herbert Wong said...

I was contemplating so.I guess in my case I should use width of 540px which is my wrapper size and leave height at 300px or something. But for the main body, where should I insert the codes (cos the above refers to header). Thanks.

Vin said...

Jennifer,

You can frame your pictures at an online site like :

http://www.toolator.com/generators/img-border

and then upload to your header.

Vin said...

Herbert wong,

If you want to put a picture in background see first part of this post :

Transparent Background for Blogs

Also see :

How to add Pictures to Background

Herbert Wong said...

Oh no- I wanted the photo/picture as part of my blog post. All I wanted is to have the picture uploaded, which is already resized to the width of my main wrapper to actually fill up the wrapper as it should, rather than being smaller.

Vin said...

Herbert,

Upload picture to Photobucket.com and copy the link. Then paste link of picture in code below :

<img src="LINK_OF_PICTURE"/>

Then paste the above code in Edit Html tab of post editor.

Herbert Wong said...

Yeap- looks like that the only "easy" option I have. Thanks.

Zolley said...

Hi,

My blog uses the Scribe template which is extended to three columns using this method.

I'm not sure what I should do with it but I can't seem to be able to change the header picture size and I don't have the header-inner part in the template code.
I already tried modifying various parameters but none of them worked.

Any idea what I should do with it?

Vin said...

Zolley,

You can add the 'header-inner' code if not present.

Vin said...

Carrie Walker,

What size do you want the header photo to be? Increase it to that size in an image editor.

VanGolan said...

can those tips work for other type of templates? eg. i use Son of Moto, and i don't see #header-inner line on the html editor. so what i'v to do?

btw how do we know the type of the templates when we want to choose it in Pick New Template? there's no specific note on them about their type... is it stretch or fluid or something else... i'm a newbie, so where i can found those knowledge of template type of blogs?

Trims, M1k3

Vin said...

Vangolan,

You can insert the #header-inner code in the CSS part of the template if it is not present.

Stretch=Fluid. The terms are synonymous. The name of the template includes 'Stretch'.

Kimberly said...

Thanks to your most excellent tutorial on this topic, I've been able to fix my blogger header. So big thanks for that!

I wondered if you could provide the proper HTML needed to make the image I use as my header clickable? I'd like to add a link to the graphic so that when you click on it you're taken back to my main homepage. Thanks for your time!

My blog

Vin said...

Kimberly,

Can you send me the template? The email addy is in the middle column.

San said...

I can't seem to fix my header pic, even after religiously following your steps!

My html code now looks like this:

#header-inner {
background-position: center;
background-image:url(http://i249.photobucket.com/albums/gg202/tzaiyi/YKCamp1-1.jpg);
background-repeat:no-repeat;
height:300px;
margin-left: auto;
margin-right: auto;
}

But no pic still...

Vin said...

San,

Add the background-image line to the

#header-wrapper {

code and not to the #header-inner code.

San said...

Thanks! I got the pic up - but how do I get rid of the "inner margin" line that now appears? Sorry... I am quite the techno-idiot! ><

Vin said...

San,

Look for the border line in the code for the header-wrapper/header :

border:1px solid $bordercolor;

Change '1'px to '0'px and save.

Onesimo said...

Hi Vin,

Thanks for all your input. Really helpful. I think Im almost there, but still cant get the header to display the right width (despite playing with the CSS). I'd really appreciate any ideas...

the blog Im testing this on is
http://onemalupablo.blogspot.com/

Thanks!

Vin said...

Onesimo,

Increase image width in an image editor on PC and then upload it.

little thor said...

hi there! i am not very techie. i am wondering you you possibly know the interior dimensions of the banner for MINIMA, or MINIMA STRETCHED? These are basic blogger banner templates. Would appreciate any ideas you might have!

Vin said...

little thor,

Look at the CSS part of the template.

Under #header-wrapper

DebbieS said...

Hi Vin,

My code does not match your code. I am using a 3-column Minima template. I don't know if it's a stretch template or note. But here's the code:


#header-wrapper {
width:890px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

.ad {
margin: 10px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Thanks for any help you can provide. I would like to upload an image and replace what's there.

My blog is http://sfsportsfanatic.blogspot.com/

Thanks again.

Debbie

Vin said...

DebbieS ,

I do not see any image in the header. Have you tried uploading it in usual way?

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.