Honey, Blogger Shrunk my Header!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!
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
52 comments:
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?
Anonymous,
What is your blog address?
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
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?
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?
Smiler,
You can hide the Title and Description :
Hide Blog Title and Description
I hope blogger fixes this thing, it's pretty annoying..
thanks for the help
Jimpa,
Have a look at :
You Blog We Listen
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
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
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?
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
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
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!
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.
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.
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.
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
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
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.
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
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;
}
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.
debbie ( beckmoore),
I can see the image in the header. Looks OK to me in Firefox2! Try clearing the cache. See :
Clear Cache
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.
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.
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.
Herbert Wong,
Why not use the method described in the post above?
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.
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.
Jennifer,
You can frame your pictures at an online site like :
http://www.toolator.com/generators/img-border
and then upload to your header.
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
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.
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.
Yeap- looks like that the only "easy" option I have. Thanks.
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?
Zolley,
You can add the 'header-inner' code if not present.
Carrie Walker,
What size do you want the header photo to be? Increase it to that size in an image editor.
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
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'.
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
Kimberly,
Can you send me the template? The email addy is in the middle column.
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...
San,
Add the background-image line to the
#header-wrapper {
code and not to the #header-inner code.
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! ><
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.
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!
Onesimo,
Increase image width in an image editor on PC and then upload it.
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!
little thor,
Look at the CSS part of the template.
Under #header-wrapper
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
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.
Who is talking about the above post?