Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, November 13, 2010

Resize Blogger Header Image

Blogger does not provide you an easy way to resize your header image. Imagine how troublesome it is to get your image's dimensions to be perfect before you can actually upload it to Blogger. But usually we face a less-than-ideal case. So we'll be left with only one option, to resize our original image and then re-upload them.

In this tutorial, I will share with you 2 methods on how you can resize your image directly by tweaking some code without having to resize your original image and reupload this image to Blogger. Of course, you can always opt to resize your image (using MS Paint, Photoshop or online image resizing websites like http://www.resizeyourimage.com/) and then reupload your image to Blogger. But it's always more convenient to just change a number or two and see an instant change in your header's image.

UPDATE: If you're a beginner, check this link out instead.
I will be using Simple Template by Josh Peterson in this tutorial. It should work with other built-in and third party templates as well. If it doesn't, the idea still remains the same. It's hard to provide one generalised solution to all the templates out there.

IMPORTANT NOTE:
This tweak will not work if you choose to display your title and description over your header image. This is because when your title is displayed, technically your header image acts as a background (instead of an image object). It is not possible to conveniently style the size of a background image, although there is a CSS3 property that can be used (background-size). Unfortunately, at the time this tutorial was written, most browsers do not support CSS3 yet. So you'd have to hide your title and description to allow this tweak to work for now. To hide your title and description, go to Page Elements/Layout - Edit on Header - under Placement, choose 'Instead of Title and Description'.


Method 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find for the following lines:
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' 
expr:width='data:width' style='display: block'/>
Replace the above lines with the one I have below.
<img expr:alt='data:title' expr:height='data:height' 
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' 
expr:width='data:width' style='display:block; height:auto; width:100%;'/>
All you have to do now is adjust the width from 100% to some other number. To increase it, you can go beyond this number. 200% for example, though your image will become pixelated.


And this is how the new code looks like:


Method 2:

In this method, you'd have to identify your image's ID, and use this ID to style your header image. I chose this as Method 2 because identifying your header image's ID is not a convenient process. Check out this tutorial on how you can identify your image's ID. Go ahead and look for your header image's ID when you're ready. This is what my Firebug's inspection shows:


My image ID is Header1_headerimg. Now that I have my image's ID, I can easily style this image using CSS. Copy this ID and head over to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#Header1_headerimg{
width: 100%;
height: auto;
}
Same concept as before, you just have to adjust the percentage and your header image will change. Have fun!

78 comments:

  1. I am feeling very frustrated with Blogger right now! I cannot write new posts, edit draft posts, change Design...what is the problem? My browser is Internet Explorer 8 and I just upgraded Java. The error message I see in the lower left hand of the screen is javascript:void(0) when my cursor floats over post options. Help!! Please!

    ReplyDelete
  2. Wow. You know a lot about this. I think it was from you that I learned how to move my blog title to the left, so it would show up on the image that I had chosen. That was cool! Trouble is, now I can't figure out how to get the title back in the middle AND over my image again, just like the blogger template used to have it. (I got the title back where it should be but the image is small and off-center)
    http://eddyandreuben.blogspot.com

    ReplyDelete
  3. @Kerry: You didn't do anything wrong. The header image issue is a glitch within blogger. Hundreds (if not thousands) of users are suffering because of this. I have posted a tutorial on how one can fix this, check it out:

    Blogger Header Image Fix

    ReplyDelete
  4. Hey THANKS! I will try this fix when I get home from work tonight.

    ReplyDelete
  5. Sure thing. Have fun while you're at it.

    Regards.

    ReplyDelete
  6. Oh My Word! Thank you for this post! This is exactly what I needed to correct the problem I was having. Thank you!!

    ReplyDelete
  7. @Sara: Kudos to you for finally finding this post. Cheers.

    ReplyDelete
  8. Hi Dear...
    dear i cant adjust the header please see my blog and tell me what should i do???

    www.links4pk.blogspot.com

    sorry 4 bad english

    ReplyDelete
  9. @Usman: Your header seems fine. What do you wanna do to it?

    Cheers.

    ReplyDelete
  10. Thanks a million, for this great tip (method-1)!!...
    I was worried about my header image size issue, and your post actually solved my problem. Thanks again. God bless!

    ReplyDelete
  11. Thanks so much! Other forums weren't able to help, but this was easy and worked like a charm. :)

    ReplyDelete
  12. @Santesh: No problem at all. Cheers and God bless.

    @Mary: Glad you think that way :)

    ReplyDelete
  13. @miravone: No problem at all :) Cheers..

    ReplyDelete
  14. Method One didn't work, but Method Two worked, finally! "#Header1" didn't work, because the image was under that and was "#header-inner."

    ReplyDelete
  15. Thanks for sharing post. Image resizing on blogger is quite difficult to do. You made it easy here. ..

    ReplyDelete
  16. thank you so much ! it helps !!!

    ReplyDelete
  17. Hey thanks a lot, the image looks much better as it fits onto the header-box but for some reason there is a little space left in the bottom of the image, how can I fit the image onto the whole box without leaving even a bit of space ?

    ReplyDelete
    Replies
    1. Let's have a look at your blog. What's your blog's address?

      Delete
  18. Thanks so much! This tutorial is simple to understand & helped me a lot :) U r awesome

    ReplyDelete
    Replies
    1. That's nice to hear :) Happy blogging 小米 :)

      Cheers..

      Delete
  19. Your tutorial and helps are the best so far! I've looked in various places, but yours is the easiest to understand. Thank you!

    ReplyDelete
    Replies
    1. That's sweet of you appreciate it, thanks! :)

      Delete
  20. Oh my gosh I want to kiss you!! My friend and I made my header in Photoshop and for some reason it didn't fit right...no matter what we did, the header was too small. This just fixed it! I can't believe how happy I am! Thank-you! Thank-you! I can't wait to learn more from you.

    ReplyDelete
    Replies
    1. I'm glad I could be of help :) Do let me know if you need help with anything Blogger! :)

      Delete
  21. YOU are BRILLIANT!!!!!!!!!!!! Thank you so much!!!!!!
    Connie

    ReplyDelete
    Replies
    1. Lol.. No problem at all Connie :)

      Cheers and God bless..

      Delete
  22. Your tutorials are just amazing, this sorted out my problem in seconds. Thank you!!

    ReplyDelete
  23. OMG !!!!!!!!!!!!! Thank you it really worked. Thank you and yes you have the smarts for this!
    s/n ..you know some people instructions don't work

    ReplyDelete
    Replies
    1. Lol.. Glad you find it useful :) Enjoy your stay here.. Cheers :)

      Delete
  24. Can you help me with my blog, again? You are the blogger genius! I changed my header now I can't get it to expand to the side/edges again; I've tried the steps above and failed.

    TIA
    Tamara
    http://hisperfectpromises.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Tamara,

      Sorry for the late reply. It seems like your blog header is spanning across your whole blog. Have you got it figured?

      Delete
  25. Hi.
    I want to add image as Header in my blog,but i can't.
    ElvesTech

    ReplyDelete
    Replies
    1. Hi there,

      You're using a third party template. If you can't set a header by going to Dashboard - Layout - Header - Edit, I'm afraid you're gonna have to contact the maker of your template to see if there's any way to add one.

      Cheers :)

      Delete
  26. hi i want to place a header image to my blog,but i am not getting the correct reolution ,the blog ineed help is http://www.mathproblemsindia.blogspot.in/

    ReplyDelete
    Replies
    1. Hi there,

      Is the method above not working for you? What is the resolution that you're going for, and what seems to be the problem in setting your preferred resolution?

      Delete
  27. I need to make the area for a header in my template larger. I am using blogger simple template. My header is showing up behind the body of my blog. Www.standardsbyyvonne.blogspot.com
    Please help! I have been trying to fix it for hours.

    ReplyDelete
    Replies
    1. Hi Yvonne,

      I'm not quite following. This is what I'm seeing in your blog right now: http://img850.imageshack.us/img850/567/20130311231401capture.png

      As it is, it looks like your header is already stretched. How large do you want it to be? In any case, adjusting your overall blog width will naturally increase the header space. To increase the width of your blog, go to Dashboard - Template - Customize - Adjust Widths.

      If this isn't what you're looking for, an annotated screenshot might speed things up.

      Cheers :)

      Delete
  28. HI, help me brother, my header image isn't staying at the right place, how do i edit it? http://mmo81.blogspot.com

    Thanks :)

    ReplyDelete
    Replies
    1. Hi Seth,

      See if this helps:
      http://www.southernspeakers.net/2010/11/reposition-blogger-header-image.html

      Cheers..

      Delete
  29. Thanks MR YoboY for the interesting post !
    could please tell me haw can i reduce mblog header size as a whole not just image .
    my blog : http://isecure-you.blogspot.com/
    what exactly i want is to reduce the space where title and desription exits .
    thanks in advance .

    ReplyDelete
    Replies
    1. Hi Abdallah,

      We cannot reduce the gap there because it is coming from your background image. Take a look at the header background that you're using now:

      http://1.bp.blogspot.com/-Dp2YlokTaM0/UM4dfdk3LtI/AAAAAAAAAYg/O2e8_05uIAs/s1600/wrapper.jpg

      See how the space is defined in the picture itself? You have to manipulate the picture if you want to proceed. Otherwise your tab will appear broken.

      Delete
    2. Thanks MY friend for the useful answer .
      so is it possible to resize the old background image and replace it with resized one without appearing broken ?

      Delete
    3. Yeap it is possible. But you have to edit the image file first and replace that file with the altered one. Only then we can proceed :)

      Delete
  30. thanks dear...its working....
    now i improved my header with your trick...

    ReplyDelete
  31. trick works like a charm except when I try to view my site from a tablet or full-html on an iphone (not mobile site). my header now doesn't display clearly on these devices and you have to scroll a mile to get to the actual blog - www.thebookbrothers.com

    ReplyDelete
  32. Hey! I don't know if you've already answered this because there are tons of comments but my header photo right now is too big on my blog minttuscloset.blogspot.fi Is the only option to make a copy of the original photo, then adjust that and upload that as the cover photo? How do I know what the right size will be? Also there's some extra space on the right side of the photo will that be corrected at the same? I'm using simple template. Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Minttu,

      You don't have to download your photo to resize it. Here's an easier way to do it:
      http://www.southernspeakers.net/2011/04/blogger-header-image-too-large.html

      Since you're making your image smaller, you'll definitely end up with more space to the right of your image. You can't fully utilize this space unless if you come up with a new header image that is more suited to your blog, resolution wise. But you could center your header though, and here's how:
      http://www.southernspeakers.net/2010/11/reposition-blogger-header-image.html

      Delete
  33. Hello,
    I used you tutorial 'adding header image in blogger', and it worked perfectly. My problem now is the image width, I want it to entirely fit the header, leaving no margins. How can i do it?

    Th CSS:
    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    #header .header-bar{
    height: 165px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://2.bp.blogspot.com/-ClMqctdgGWo/UmenkAlDPqI/AAAAAAAABzc/jnjH4YCPVD4/s780/Onda207.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    #header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
    top: 0px !important;
    margin-top: 0px !important;
    position: relative !important;
    }
    body.sidebar #main.hfeed #sidebar{
    position: absolute !important;
    }
    body.sidebar #main.hfeed #sidebar .item{
    background: #EEEEEE;
    }
    #header{
    position: relative !important;
    }
    #header #views{
    position: absolute;
    }
    #header #pages{
    left: 110px
    }


    #header.header .title a h1, #header.header .title h3{
    display: none;
    }

    .header-bar #search{
    display: none !important;
    }

    Thanks,
    Gil

    ReplyDelete
    Replies
    1. Hi Gil,

      I'm afraid that is not possible. Here's why. The width of your blow is an ever-changing variable. It loads at x px in your computer, and y px in mine. Whereas your header image is a static entity. Even if you could widen your header image, someone somewhere will still extra space, or cropped image, on their screen - all because the dynamic template loads in a way to adapt to the viewer's screen.

      Delete
  34. Thanks for this, really helped.
    www.birdrs.blogspot.co.uk

    ReplyDelete
  35. Its working fine for width.....but how to reduce the height of header???

    ReplyDelete
    Replies
    1. The height follows the original resolution of your header image. You might wanna try reducing the height of the image before uploading it to your blog.

      Delete
  36. still works:

    www.robintoons.blogspot.co.uk

    Thank you!

    ReplyDelete
  37. thanks! it worked on my blog www.loadcentral-cebu.blogspot.in

    ReplyDelete
  38. thank you so much for the help. really useful
    http://www.makeupandbeautyblog.in/

    ReplyDelete
  39. What is the correct size of image for blogger in both view desktop and mobile...In mobile view my header is not clear...why?

    ReplyDelete
    Replies
    1. There is no one default size. But if your image is large enough, Blogger should be able to automatically fit to the viewer's screen size.

      Delete
  40. Thanks for this! It really works!

    ReplyDelete
  41. Hello I need some help but can't seem to find anything to help me. I my blog header image is on top of my blog post title and date and i don't know how to make it so there is more space between them? if you could take a look it would be a great help!

    Blog: http://lovablebookworm.blogspot.com

    ReplyDelete
    Replies
    1. Hello I see your header image looks fine. Have you got it sorted?

      Delete
  42. Thanks for the tip.
    With this code I am able to change the logo image height, but the width does not change. Any ideas as to what may be my problem?

    ReplyDelete
    Replies
    1. Hello there. Sorry for the late reply. Mind if I have a look at your blog?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.