How to Center the Blogspot Header Image

Setting your blogspot header image in center makes your blog look much more cooler, we all know making your blogspot blog friendly and easy to navigate requires deep knowledge in xml coding.

Today i will put you through on How to Center the Blogspot Header Image the right way, i have made this tutorial as easy as possible for you to understand.

Not all template might come with centered image css but if you coding the default blogspot theme avaliable in your dashboard then you might want to follow this technique.

How to Center Blogspot Header image Using CSS

  • Step 1: Login your Dashboard

First you need to log in your blogger account

  • Step 2: Click Template

Then select your blog, then go to “Template“

  • Step 3: Click Customize

click the “Customize” button on the right side.

  • Step 4: Using Advance Option

Proceed to “Advanced” > “Add CSS” tab and paste the code in the empty box:

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

#header-inner img { margin: auto;}

Now you have successfully centered your blogspot header image.

Now if want to use a small image and you want it to become full width, add this CSS below:

#header-inner {background-size: cover; width: 100% !important; text-align: center;}

#header-inner img { width: 100%; height: 100%;}

  • Step 5: Enter Key

Now Press ENTER key after you paste the code snippet.

  • Step 6: Apply to blog

Then click the “Apply to Blog” button and that’s all you need.

Wow… Now you can enjoy this centered feature, if you still having problem use the comment box.


About Ayorinde Ayodeji

An Experienced web designer/designer and also a certified digital marketer and always love sharing useful information with people who are ready to learn. Am crazy about technology i don't mind having my own world.

View all posts by Ayorinde Ayodeji →

Leave a Reply

Your email address will not be published. Required fields are marked *