Fang Talks

Holy dicks!

So my pal Mark has this problem yesterday, and I helped him fix it.

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!
Alternatively, you could just leave me a comment with the link to your blog. I’ll have a look at it and give you the appropriate code if I can. I got your back!

IMPORTANT: It seems a lot of people’s header images have a background in the image itself. Be sure that, before uploading, you give the thing a transparent background using whatever image editing software it is you use. Additionally, make sure you save your image in a file format that supports transparency. PNG files are generally the best for images on the web, so try to save as a .png file!
It is also possible that Blogger is adding these backgrounds itself, in which case I can’t help you. Sorry!

Hope that’s going to help some of you out. I know it helped Mark!
~ Fang

Comments

  • 29/12/2016 (2:13 AM)

    Hi. I tried both fixes but I still have a background on an image I was sure should be transparent. Website below. Thanks for your help.

    • 29/12/2016 (11:09 AM)

      Looking at the image in your header, it has a white background. I see its a .jpg, which generally don’t support transparency. Did you try saving and uploading the image (without background) as .png?

  • 22/02/2016 (12:05 AM)

    It Does NOT Work on My Blog at “http://rehovot-sheba.blogspot.com”, Would You Please Help Me……

    • 22/02/2016 (3:02 PM)

      It looks fine to me. Your header image is blurred at the edges, where you can see the background shining through.
      Is that what you want to accomplish? What exactly isn’t working?

  • 27/12/2015 (10:52 AM)

    Thanks so much for this valuable informative.

    It’s the first place that I have selected and checked for the css code title transparent.

    It works well on my blog.

  • Camilla
    02/12/2015 (9:34 AM)

    Thank you soooooo much! I’ve been looking for this everywhere!!!

  • 23/05/2015 (10:26 AM)

    Code didn’t work because my background was white. Made my background transparent in MS Paint and now all is well. Thanks so much! I hated that blue-ish background that blogger gave it!

  • frea
    27/01/2015 (2:29 PM)

    Adding the CSS code (while using a PNG with transparent background worked), thanks a lot!

  • 22/10/2014 (10:01 PM)

    OK! Great! Thanks so much! This really helps :)

    • 26/10/2014 (1:36 AM)

      I found out today I needed to save the image as a PNG from Photoshop. Not sure why but it worked!

      Someone told me that when there is a problem with pictures its usually not a coding problem?

      • 26/10/2014 (11:38 AM)

        Hmm, what did you originally save it as, then? .jpg? Those generally don’t support transparency, no. I’ll add that to the post, good catch, thanks!

  • 22/10/2014 (9:41 PM)

    Sorry about that! I believe I just changed it :)

    • 22/10/2014 (9:59 PM)

      This is the image that’s displayed in your header. As you can see, it has a solid (gray) background. If the file you upload has a transparent one, then there isn’t much you can do other than look for some (probably hard to find, if it exists at all) Blogger setting to keep it from messing with your image.
      Sorry, but once Blogger starts changing up the things you upload, this starts getting out of your control. Shame, sorry I can’t help more. (Maybe try the Blogger support forums? (And let me know if you do manage to fix this!))

  • 22/10/2014 (9:11 PM)

    Hi!
    Been trying to get a transparent header here. I’ve been using Photoshop. I have made the background transparent and saved the image in jpg. When ever I load it on blogspot I keep gettting a light gray background. Used the code and all. Any suggestions?

    Alana

    • 22/10/2014 (9:39 PM)

      I’d take a look, but your blog’s set to private, so I can’t get in. Hard to help if I can’t see the issue myself!

  • 28/09/2014 (10:09 PM)

    please check mine and help em figure out how to turn it transparent
    http://arabhackershub.blogspot.com/

    • 29/09/2014 (6:44 AM)

      The background’s in your image.

  • Lui
    22/07/2014 (4:45 AM)

    Yeah, the more I see it, the more I like it. For now I’ll keep it. Thanks for your help! =)

  • Lui
    19/07/2014 (4:53 AM)

    Hi.

    I tried it and I still get a white background. My image has a transparent background so that’s not the problem. I also set the header background to tranparent.

    When I set the main background to tranparent it works but I need that background for the rest of the page. Is there some way to bring the main background down a bit?

    Thanks for the help.

    • 19/07/2014 (10:24 AM)

      The only possible solution I can see is adding the following CSS code:
      .content-inner { background-color: none; }
      .tabs-outer, .main-outer, footer { background-color: white; }

      This removes the main background, and sets a white background for the tabs, content and footer separately. You currently have a white border on the sides. When you use this code, that gets removed, but your header becomes transparent.

      Hope this is satisfactory!

      • Lui
        19/07/2014 (10:34 PM)

        Thanks it worked, the only problem is I get a border and a different shade of red (changed backround image) in the background. Any idea how to fix it? Thanks in advance!

        • 20/07/2014 (3:41 AM)

          That change can’t be due to the code I gave you, so it must be something you did through the Blogger template editor thingy. Fiddly around with it a bit, try resetting the background. Let me know how that goes!

          • Lui
            20/07/2014 (10:51 PM)

            Sorry, I can’t figure it out. Im guessing it’s a drop shadow background effect.

          • 20/07/2014 (11:18 PM)

            Okay, sorry, I misunderstood your problem. I did some poking around, and this was the only semi-viable solution I could find.
            .content-inner { padding: 0; }
            This makes the content on your page approximately 20 pixels wider though, so you’ll have to adjust the header image to take that into account if you choose to use this as your solution. I tried finding a way to keep the width the same, but couldn’t come up with anything reliable.

            The way it is now doesn’t look all that bad though, it could be passed off as a nice subtle effect. But I’ll leave that up to you. Sorry I couldn’t help more!

  • Al
    21/05/2014 (10:42 AM)

    Hi, how do I make the background of attire and diary transparent/ white?
    Thanks!

    • 21/05/2014 (11:09 AM)

      Hmm, your image seems to have a white background in it, so you’ll have to cut that out in your image editing software of choice. If you already did that, and it still shows up like this, then apparently Blogger is adding backgrounds to the image itself, and I wouldn’t know how to circumvent that.

  • 09/05/2014 (12:02 AM)

    Hello, I tried your instructions but I can’t get the simple template to go transparent. Any ideas? Thank you. Gemma

    • 09/05/2014 (6:53 AM)

      Your header image has the same white background color as your blog does right now, so it looks fine unless you change your blog’s background color.
      As for your issue, the white background is part of your image. Have you made sure your image has a transparent background before you uploaded it?

  • 19/04/2014 (2:44 AM)

    Thank you so much! This helped me a ton!!

  • 07/02/2014 (3:05 PM)

    I have a custom template that I got from puglypixel.com, my blog is bookwormsindresses.blogspot.com and I really want to get a transparent header (if I can) if not, I might re-build my own template from scratch.

    • 07/02/2014 (3:59 PM)

      Sure, but the image in your header right now doesn’t have transparency. What exactly do you want?

  • 25/01/2014 (4:36 AM)

    Okay, thank you so much i will try it! xx

  • 15/01/2014 (11:39 PM)

    Hi! I’ve tried a lot and It hasn’t worked! Please help! My Blog is http://www.fashionisisa.blogspot.com

    • 16/01/2014 (7:37 AM)

      Hey! This is because the color is part of your image. You’ll want to remove that using Photoshop or any other image editing software of your choice.

  • 07/12/2013 (1:55 AM)

    I’m using the Simple template on Blogger with no luck from your codes here: http://www.hannahhuntwrites.com

    I’d like the white portion to start right beneath the header/navigation. Thanks!

  • 29/11/2013 (8:00 AM)

    My template is from Blogger itself,but the header isn’t changing gregjslow.blogspot.com

    • 29/11/2013 (2:18 PM)

      Looks fine if you ask me. The black in your header is actually in your image, I don’t know what you want to have transparent?

  • 09/10/2013 (8:37 PM)

    I tried both codes and it didn’t work!!! :( This is supposed to be a white background for my header image, it loads white everywhere else except here. Please help… http://www.frochronicles.com

    • 09/10/2013 (9:36 PM)

      Can’t see anything wrong with it. Your image has a white background of itself (it’s part of the image), but it doesn’t stand out or anything. Checking the source of the page indicated the code has indeed worked, since header-outer has a transparent background. Doesn’t matter though, the image forces the white, and it looks good… right?

  • 24/05/2013 (11:32 PM)

    Has blogger changed recently? I used to be able to use a header png with some transparency, but now it’s not working.

    http://donnakweaver.com

  • Anonymous
    24/05/2013 (7:33 PM)

    You need to save your image as a .png since jpegs don’t support transparency. Hope this helps.

  • 07/04/2013 (8:47 PM)

    Thanks for looking. I’ll go and play in fireworks then. TTFN!

  • 06/04/2013 (9:36 PM)

    Hi Mr Fang. I inserted each of the lines of code you suggested – no joy.

    I created my header in Serif Craft Artist, and fiddled a bit in Fireworks, so I am pretty sure that the jpeg does actually have a transparent background. The page packground is created in the same way.

    If you get the chance to have a quick look at my blog and advise, I’d be really grateful. URL is:

    http://brightshinysparklycrafting.blogspot.co.uk/

    I’d be happy to send you the jpeg if that would help. It’s nice to know someone has my back!!! :-)

    • 07/04/2013 (11:22 AM)

      Your header image definitely doesn’t have a tranparent background though. This is the one it’s displaying right now:
      http://2.bp.blogspot.com/-Z9sgEuzsoyk/UWE0S-NjFzI/AAAAAAAAAPk/kzfi_X7Skkc/s1600/blog_title4_50opaque.jpg

    • 07/04/2013 (8:00 PM)

      Ah, yes you’re right – I fiddled and changed it from the white background, to this, which has the opacity set to 50%, using a snagged piece of the main background. I have used both of your bits of code in the Advanced CSS tab in the Customise section. This is better than it was, when it was a great big white block, but still not transparent. Any ideas, or is it a ‘suck it up, that’s the shortcomings of the app’ situation?

    • 07/04/2013 (8:44 PM)

      As far as I can see the header image you’re using has no transparency whatsoever, so I’d say the image is still your problem.

  • 25/01/2013 (5:05 AM)

    I haven’t touched my blog’s physical design since I first started. I feel really bad for neglecting it for so long…

    Maybe it’s time I put some work into it.

  • 25/01/2013 (1:36 AM)

    Remember though that the “background: none” code didn’t actually work though :( I think one day I might get around to re-editing the image I used before, but doing it properly and keeping the aspect ratio so it looks right. Once again, cheers for the help.

  • 25/01/2013 (12:34 AM)

    Yeah, transparency can look really nice when used in the right places.

Post a comment

Your email will stay hidden, required field are marked with a *.

Experimental anti-spam. You only have to do this once. (Hint: it's "Fang")