May 27, 2011

How to Center Your Header Image

I posted earlier about how to center your Header Text here if you are using one of Blogger's new templates (not Minima). However, if you add one of my headers or one of your own and find that it is not centered, try this:

1. Go to Design and click "Template Designer"
2. Click "Advanced" and then scroll to the bottom in the next column (where you see things like "Text Color" and "Link Color") until you see "Add CSS". Click "Add CSS".
3. In the box, type this:  

#Header1_headerimg {margin:0 auto;}

4. Look at the Preview to make sure it worked and if it did, click "Apply to Blog"

There you go! The header is centered!

UPDATE:
This will only work if you click "Instead of Title and Description" when you upload your header.

If you choose "Behind Title and Description", it will not work. Instead, you need to add a different code. Follow the same instructions as above, but insert the following code instead:

#header-inner {background-position: center !important; width: 100% !important;}

I got this last code from BloggerSentral. Read HERE for more on adjusting your header and header text.


~Dani

48 comments:

  1. Thank you so much! I've been looking for this solution for an hour! :)

    ReplyDelete
  2. Thank you so much! If I had found your blog earlier, I could have saved myself hours of frustration!

    ReplyDelete
  3. Thank! I've been searching blogs for about a half hour and tried about a dozen different ways to do it and this worked perfectly! Thanks so much!!! :)

    Brie @ B reezyPinkDaisies

    ReplyDelete
  4. Worked like a charm, thank you so much!!!!

    ReplyDelete
  5. http://sheenaashlock.blogspot.com/

    Can you help me?! I have tried EVERY code I can find and nothing is working!

    ReplyDelete
    Replies
    1. I just looked at it on an ipad and it looked good. Is it still not centered when you view it on a computer? What template are you using?

      Delete
  6. Thanks! i tried different codes already and yours just worked instantly! thanks a lot again!

    ReplyDelete
  7. It work! Thank you very much! :)

    ReplyDelete
  8. Thanks Dani....it worked and how simple were the instructions...great work!

    ReplyDelete
  9. Thank you ! This was actually what I was looking for - tried lot's of different variations and this one did the job :) !

    ReplyDelete
  10. This is not working for me. I am using Picture Windows (the first one) Template. Am I doing somehthing wrong?

    ReplyDelete
    Replies
    1. Look at my update above. This should work with the code above. If not, let me know!

      Delete
    2. It didn't work with my blog!! why is that?

      Delete
  11. hi Dani this is my test blog http://bit.ly/Rj1VwE

    my header image is not in center..Can you guide me please
    I have created blog background and header as you guide in your tutorial

    ReplyDelete
    Replies
    1. I'm not quite sure what the problem is. With the Minima template, the headers are always slightly off center to the right. But I can't tell if your background needs to be adjusted a little bit too. Can you email me your background and header? If I can look at them myself I can give you more help. My email is blogdesignsbydani[at]gmail[dot]com.

      Delete
  12. Replies
    1. I looked at your header and background and I think that your background design is slightly off-center. You can do one of two things:

      You can either adjust the background image so that the purple ribbon on the left is moved over to the right more

      OR

      You can shift it over manually with a little bit of change in the CSS code that you used. I am assuming that you used the following code:

      <style type="text/css">
      body{background-image: url("Link Code"); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>

      Replace this code with the following code:

      <style type="text/css">
      body{background-image: url("Link Code"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; margin-right:15px;}</style>

      Of course, replace LINK CODE with your link from Photobucket (or wherever you stored the image).

      Delete
    2. In the first part, I meant you can adjust the background image so that the purple ribbon on the right is moved over to the right more.

      Delete
  13. Oh thank you so much Dani Sis
    Its working fine :)Thank you so much
    and yes i was using above code , now replaced the below code it is perfect :)

    ReplyDelete
  14. thank you! i've been looking for an easy way to do this forever!
    ashleyreneethompson.com

    ReplyDelete
  15. Thank you!! Nice and easy peasy, perfect for me. Had been looking for a proper way to do this without changing my margins for ages! Merci xx

    ReplyDelete
  16. Trying to center the image that is underneath my header, it's not an actual part of the header. PLEASE HELP!

    ReplyDelete
    Replies
    1. Jess, did you enter the image through the Blogger Gadget "Picture"? If you did you cannot center it as far as I know. There are other ways around it. If you have your image uploaded to the web to an image hosting site, then you can use some html to add the image and to center it. Let me know if you want to know how to do this.

      Delete
  17. Yes I uploaded my picture through the picture gadget. I would love to know how to do it the way you mentioned!

    ReplyDelete
  18. My question is: how do you do it if you have Minima? Thanks for any help you can offer.

    ReplyDelete
    Replies
    1. From your Dashboard, click "Template". Then click "Edit HTML" and then "Proceed". Do NOT change anything when you go into this, just look at what it says. You should see the name of the template and who designed it. If it doesn't say Minima, then you don't have Minima.

      Or, sometimes you can look at the bottom of your blog and it will say the name of the template, Simple, Picture Window, etc.

      Delete
  19. thank you so much...i've been looking for this solution for a long long time ago..thank you very very much!!

    ReplyDelete
  20. Thanks! It also works if you have "Have description placed after the image" selected as well.

    ReplyDelete
  21. Thank you soooo much!

    Jenna @ www.rainonatinroof.com

    ReplyDelete
  22. Thanks so much! It's been making me crazy and your solution was so easy! Yay! You rock!

    ReplyDelete
  23. Can I use this for centering footer image?

    ReplyDelete
  24. Hi Dani, can you look at mine? I tried using the codes above but nothing is working...my blog is melodysjourney17.blogspot.com. Thanks!

    ReplyDelete
  25. My browser is being dumb and won't let me reply directly to your questions.

    Najwa, it probably will work but I haven't tried. Do you know what you would use instead of the header code? Let me know if you tried it.

    Melody, your header looks good from my end. Are you still having trouble?

    ReplyDelete
  26. hi there, thanks for helping me out..check out my blog
    https://backbenchtalk.blogspot.com

    ReplyDelete
  27. oh WOW! thank you so much. I've been trying to centre my header for ages. Looks great now.

    ReplyDelete
  28. holy smokes it worked thank you!

    ReplyDelete
  29. Thank you SO MUCH! I have been struggling with this on my site, www.DecoPrintChattanooga.com, for a long time.

    ReplyDelete
  30. Thanks, really handy and easy to use tutorial!

    ReplyDelete
  31. thanks so much....this is really an easy to use tutorial

    ReplyDelete
  32. THANK YOU, worked perfectly!!!

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.