How to have a transparent background header in blogger

By: Unknown 0 comments

If you’re like the majority of Blogonauts, you’ll probably have a nice (quite possibly default) template, which allows you to upload a header image to be used in the header of your blog. Say you want the pretty background of your blog to shine through, or simply don’t want to change the background color of your header every time you change your template around. You’ll be using a (partially) transparent image for that, right? Well, Blogger disagrees with your ways, and will make it look like your image now has a background.
That’s lovely and all (actually no it isn’t, it’s a huge glaring issue), but we want to change that. After all, you didn’t work in the transparency into your image for nothing, right? Well, here’s how you fix it.
(A lot of people have this problem, so here’s some extra emphasis. First and foremost, make sure your image actually has a transparent background instead of solid white or other color!)
In Blogger, go to the “template” page of your blog. There should be a screenshot of your blog displaying, with an orange button “customize” under it. Hit that, and you’ll be displayed with a page you may be familiar with. Blogger’s built-in template editor. Though limited, it has a nice feature. There should be a label on the left that says “advanced”. Click that. You’ll be able to add in your own CSS rules, which is what we want to do!
In the text field, paste the following code:
.header-outer { background-color: transparent; }
That should do the trick just fine. If it doesn’t though, you might want to use slightly more extreme measures, and use this line of code instead:
.header-outer { background: none; }
Be warned though, this may mess up the header on some templates.
After pasting the code, you should quickly see your blog change, the background of the header gone, and the transparency giving the desired effect. Hit the “apply to blog” button, top right, and that’s it. You just fixed your blog’s header!
If it didn’t work chances are you’re not using one of the default templates (which makes the chances of you being able to upload a custom header much smaller). You’re out of luck, sorry!