How to Center Blogger Header Image

The header of a website is the first thing a user notices on his first visit to that website. So, it is essential to have a  standout and clean header. We should also make changes that fit our blog so that it looks pleasant in the eyes of users.

At a point in time, we will find the need to adjust the header of our blogger blog, which is why I believe you are reading this post right now. With the codes I will be sharing, you make any edit to your blog header is you really understand basic steps in coding.

If you don't have an idea of what to do, this post is going to help you, So, please follow the tutorial I have prepared for you and you will get it done in no time at all.

Step 1. Go to Template ⥤ Customise ⥤ Advanced ⥤ Add CSS

In the CSS editor, paste the following code, according to what you want.

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

You can change the center to right of left depending on where you want your header to be.

To Make Header Full Width

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

To Align Text to The Side of Header - Side by Side Style

#header-inner {background-position: right !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {float: left;clear: both;margin-left: 20px;}

To make the image appear to  the left, change the left to right

Step 2. Apply code to blog by clicking the Apply to Blog button.

That's how it's all done. You can alter the the the texts in red.

Like I mentioned earlier, you can make more core edits if you know the basics of CSS. The margin can be altered, you can even add your own margin definition and set the measurement according to how it tally with your blog design.

If you don't know anything in CSS, you better not change the codes so as to not mess up your header. You can find someone who understands better than you do.