Wednesday, June 20, 2012

Help with Blogger!

Okay all you tech nerds out there, I need your help.

I have never -- never! -- been able to get a header photo to "fit" correctly on my blog. As you can see, I just posted a new photo, same size as all the other photos I've posted, and it looks worse than ever. Nothing I do will make it "stretch" over the entire header block. And yes, I always click "stretch to fit" when downloading a photo, and it never does.

I've tried resizing any number of ways and nothing works. I've been haunting Blogger help sites and haven't found an answer yet. So if anyone knows how I can get header photos to fit properly, by all means let me know!

20 comments:

  1. If you find out, please post, as I have the same problem.

    ReplyDelete
  2. I've had this same problem. Am waiting for a good clear answer as well! I guess it has to do with sizing the photo just perfectly. I don't know! Hope you get an answer cause I will be haunting your site to see what comes of it!

    Lana

    ReplyDelete
  3. Mine always work, so I don't know that I can per say help with the stretching, and I do composite headers of a couple pictures. This link is where I found out how to do it, and it goes through saving/exporting and the pixels you need to save as. I suspect you need to have a wider picture and save it to the exact pixel size of your header (which depends on how many pixels wide your blog is set to display I think). But check the link out, I hope it helps you - good luck!!
    http://blissfullydomestic.com/life-bliss/geek-life-bliss/how-to-make-a-blog-header-for-free/66333/

    ReplyDelete
  4. To quote a past president "I feel your pain" I will be interested in the answers as well, blogger is not very user friendly but then again I am not very computer savvy either so what do I know.

    ReplyDelete
  5. Is this a custom template or one blogger provides? I'll need to recreate it on my private blogger knowledge base so I can play with the image and see if I can get it to work.

    ReplyDelete
  6. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents.

    ReplyDelete
  7. I compared your header source code with a few others on blogger (I use wordpress) and I noticed your code is somewhat skitched up compared to others.

    I would recommend you try saving the page without a photo in the header (blank).

    Then reload and save with stretch turned on and re-view to see if that fixes it.

    Hopefully it will reset the code.

    good luck SW

    ReplyDelete
  8. I sometimes have to try the photo more than once before it works, so I'm afraid I have no answer!

    ReplyDelete
  9. I use image software to get it the right size. i know I have had to crop squares into rectangles before.

    ReplyDelete
  10. I've always had the same problem. I'm blogger illiterate, haha.
    Others always have beautiful headers.
    I have found a free online program that helped me both make the collage and resize the header picture I have on my blog now.
    Try picmonkey.
    Good luck!

    ReplyDelete
  11. Verify the download image settings against earlier ones that worked...maybe delete it and the one previous to clear it out, then retry? Have you changed your CSS? The inner header is sized to the image so something has changed, perhaps your theme was updated recently? Good luck! Worst case, size it to fit exactly via an image editor (delete earlier versions back to ones that worked)...

    ReplyDelete
  12. Hello, it looks like the picture above was taken with a camera set to 640X480. You might try taking a picture with your camera set at a bigger size, then inserting it in, this way the template will 'cut off the edges' instead of trying to stretch a small picture to a bigger size.... the width of your header is about 820 I believe....

    Desert Rat (hot in the desert southwest)

    ReplyDelete
  13. Never used blogger but I've had similar problems with other applications stretching (or not) an image. The solution I've found is to discover what size (particularly aspect ratio) the application wants the image to be and then manipulate the image in photo-editing software before uploading it. The photo-editing software doesn't need to be anything expensive, MS-paint would do at a pinch.

    ReplyDelete
  14. Ask Enola to help. She's got her working...Oh wait... maybe not.

    Sorry, just being silly this Thursday morn. Hope you get it working. Love the pic anyway.

    ReplyDelete
  15. So, the problem is in your style sheet and how you're inserting the image. It is a background image, so different styling rules apply than to a normal image.
    I'm not sure how to do this in wordpress (I'll look into it), specifically, but you need to set your background-size attribute to 100%. It will then take up the entire header section. Also, you should remove the explicit sizing of the image, which is currently set to 640x480.
    Feel free to contact me if you need more help, I'm a fan of your blog and would love to give back.

    ReplyDelete
  16. So, the problem is in your style sheet and how you're inserting the image. It is a background image, so different styling rules apply than to a normal image.
    I'm not sure how to do this in wordpress (I'll look into it), specifically, but you need to set your background-size attribute to 100%. It will then take up the entire header section. Also, you should remove the explicit sizing of the image, which is currently set to 640x480.
    Feel free to contact me if you need more help, I'm a fan of your blog and would love to give back.

    ReplyDelete
  17. I did a little more research and found this link on how to edit/add your own custom CSS.
    http://www.itechcolumn.com/2011/12/how-to-add-custom-css-in-blogger.html

    You should be able to fix it by adding the following CSS:
    #header-inner {
    height: 100%;
    width: 100% !important;
    min-height: 0px !important;
    background-size: 100%;
    margin: 0px;
    }

    It worked in my Chrome browser and looks pretty solid. The right way to do it would involve editing your template, which would take more time and be a little more risky. The section of CSS above /should/ just override the header section.

    The results look like this in chrome: http://screencast.com/t/jhmq9W0tk2b

    ReplyDelete
    Replies
    1. I followed your excellent suggestion and you're right, the photo "fit" the header much better... EXCEPT it's now narrow from top to bottom, instead of "tall" so I switched it back. Any thoughts about how to allow me to post the full photo in a taller format? That way I can post a whole picture rather than just a slice of it.

      This is wonderful advice, thanks so much, hopefully I'm not asking for the moon!

      - Patrice

      Delete
    2. Try this site.

      http://www.tweakmyblogger.com/2010/08/stretch-header-images.html

      Delete
    3. This is one of the coolest reply threads since I was a still lurker here.

      It wouldn't matter to me if the photo fit, but I'm glad it matters to you. All I see is firewood and stump-pulling. lol

      I appreciate the readiness and spirit of all the help offered. I think it shows the caliber of your well-earned readership and says good things about the blogging community.

      A. McSp

      Delete