uploading & centering an image header

uploading a custom header image to your blog is actually very simple. the little tricker part is getting it centered. so i'll first walk you through how to upload your image and then i'll show you how to center it. if you've already got your image uploaded and you're just looking to center it, you can skip down to part 2.

part 1: uploading an image header

open up blogger. go to layout >> header, edit >> upload image.

you should be able to see your image once it's uploaded. you can adjust the blog title placements as needed before saving. i prefer not to have text, so i chose "instead of title and description". 

hit SAVE and you're done! 

part 2: centering your image header

once you've got your header uploaded it will be defaulted to the left, looking like the image below. for some bloggers (like me) i prefer my title to be on the side. but most others want their header image to be centered, for obvious reasons. 

to fix this, you need to go into your blogger template >> customize >>advanced >> add CSS. copy and paste the text below to the CSS box, press the ENTER key and then APPLY TO BLOG.

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


if you'd like your image to be full width, use this css instead

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

that's it! after saving your work, you can go back to your blogger page to view your blog and you'll now see that your image is center. if for some reason it isn't, double check the code that you copied and pasted. it needs to be exact because even the smallest modification (like a space or an out of place semicolon) can mess it up.

i hope this helped. but if you have any questions, just comment and ask!