Are you customizing your
blogger template? That's good. It will help you to improve your knowledge about blogger template's coding. As a blogger you must know about the codding too. in order to not to hire developer for such small things/error occurs on your blog. which can be solved by you easily. And if you can't, then even don't need to worry as we have Google. There are many sites available where you can get tutorials, tips and tricks for codding. and this blog is also one of them. Here in this blog i share
tutorials, tips, tricks, and
widgets for blogger (
Google Blogger).
OK, let's come to the today's tutorial, Here we will discuss about to center the blogger header image using
CSS.
Most of blogger templates comes with a left side header. and now if your template have the same left header and you would like to make its position center then here are few things you have to do to make it done. Don't worry it isn't as hard as you are thinking. just follow the simple steps given below.
Also see : How to Add a 3 Column Footer Widget In Blogger
How to Center the Blogger Header Image?
Go to
Blogger Dashboard > Template > Customize > Advanced > "Add CSS"
Paste the following code just into the text area.
#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
If you have a small image, and want it to be displayed with full width then use below code instead.
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
Now, Hit
"Enter" key after you paste above code, and Click "
Apply to Blog" button.
That's it.
Still if you have any questions about the same. Feel free to ask by commenting below.
Thanks, Enjoy !