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!
If you find out, please post, as I have the same problem.
ReplyDeleteI'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!
ReplyDeleteLana
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!!
ReplyDeletehttp://blissfullydomestic.com/life-bliss/geek-life-bliss/how-to-make-a-blog-header-for-free/66333/
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.
ReplyDeleteIs 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.
ReplyDeleteThe 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.
ReplyDeleteI 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.
ReplyDeleteI 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
I sometimes have to try the photo more than once before it works, so I'm afraid I have no answer!
ReplyDeleteI use image software to get it the right size. i know I have had to crop squares into rectangles before.
ReplyDeleteI've always had the same problem. I'm blogger illiterate, haha.
ReplyDeleteOthers 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!
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)...
ReplyDeleteHello, 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....
ReplyDeleteDesert Rat (hot in the desert southwest)
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.
ReplyDeleteAsk Enola to help. She's got her working...Oh wait... maybe not.
ReplyDeleteSorry, just being silly this Thursday morn. Hope you get it working. Love the pic anyway.
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.
ReplyDeleteI'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.
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.
ReplyDeleteI'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.
I did a little more research and found this link on how to edit/add your own custom CSS.
ReplyDeletehttp://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
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.
DeleteThis is wonderful advice, thanks so much, hopefully I'm not asking for the moon!
- Patrice
Try this site.
Deletehttp://www.tweakmyblogger.com/2010/08/stretch-header-images.html
This is one of the coolest reply threads since I was a still lurker here.
DeleteIt 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