Oct 18, 2008

Fitting Images In Your Header

One simple way to make your garden blog stand out is to add an image to the header of your blog. It is easy enough to do but I've noticed that several garden blogs have images that don't fit within the wrapper of the header. If you've performed the modification to add gadgets and widgets to your blog's header this one should be really easy.

This is a screen capture of the garden blog A Succulent Life and as you can see the image that Julie added to personalize her blog's header doesn't fit within the constraints of the header. If you have this problem on your own blog there are two things you can do to fix this.

Step #1: Save or Test
Whenever you're going to perform any modifications for your blog the first thing you should do is backup and save your template. To achieve this click on Layout>Edit HTML and click "Download Full Template." If anything should happen you can always upload your template and restore your blog. Another option I like is to create a test blog where you can perform these modifications and get your feet wet and comfortable with the process before you do it to your garden blog. You can never be too careful.

Step #2: Locate header wrapper
A Succulent Life is using the standard Minima template without any modifications that I can see. This is what the header wrapper currently looks like:

#header-wrapper {
margin:0 auto 10px;
border:1px solid #cccccc;

The reason that the image doesn't fit within the borders of the header on A Succulent Life is because the image is too wide for the 660 pixels that have been assigned for the header. We have two options available to us to fix something like this.

Option A:
Re-size the image so that it fits within the constraints of the header. When uploading an image to your header make sure that it isn't as wide or wider than the width that has been allotted to it. In this case the image shouldn't be wider than 660 pixels.

Option B:
If you don't want to go through the trouble of resizing the image again then just add enough pixels to the header wrapper so that your image fits comfortably. Change the width (660 pixels) to whatever the width of your image is and then Save your template.


  1. I am going to go try this right now since I could not get my header photo to fit properly. Urrr!

  2. Tina,
    You're using the Minima Stretch template so it may be harder for you to do this since that template stretches out for larger screens. You could switch your template to the regular Minima or you could start with a larger image-something like 700 pixels wide and see how that works.

  3. OMG, Mr. Brown Thumb! You noticed!!! How funny that you noticed! I was hoping I could get by with this and no one would notice! LOLOL! Hey...I am grateful for the info. Now if I can just do it! You know, one thing about bloggin is that it sort of keeps me pushing forward...must learn the name of a flower or plant...must get my header right! But of course, it is a good thing, and I enjoy all of it! So...here I go to try and get it right!
    xoxo- Julie

  4. I did it, Mr. BT! I can't believe how easy it was!!! Thankyou so much!!! Soon I will be able to call myself computer literate!!! LOL!

  5. Thanks, Mr BT. I'm a newbie blogger and this was very helpful, esp about saving the template!

  6. Thanks for the great advice. I did it, only took me 3 times, three times the charm :)

  7. Julie, Anne & Ohio Mom glad you found this useful. I don't know why but when I visit blogs and the pic doesn't fit in the header it kinda irks me. lol.

  8. thank you so much. you just solved my puzzle. resizing the image worked perfectly for me. regards :)


I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.