Blogger :: Issues with transparent images & quick fix

So I was writing a new post and decided that it needed more visual appeal then just plain text. I decided that I would add a "tools" icon that had transparency at the beginning of the post in hopes it would draw more readers to read the full post. So I add the image in the Blogger Post Editor without issues and keep writing. Well imagine my surprise, when I "Previewed" the post and the background of the image was coming through. Ok, ok, it wasn't like "ZOMFGWTFBBQ NERD RAGE !!!", it was more like Mr. Horse saying "No sir, I don't like it".

My first thought was "Damn I didn't save the image with transparency." So I close the preview window and notice that it was transparent in the edit window. I re-preview and sure enough the image background issue is back.  So then I was all "It's not me, ITS YOU!". Turns out the issue wasn't the image transparency, but the Blogger Theme and the CSS behind it. Here's the same image with the background "issue".

So I start to troubleshoot the issue, lets face it troubleshooting these days all start with a few  "googles". Anywho I come across the following post on another blog. Insert "AH HA" moment. This points me in the right direction.

I pop open the Blogger>Template>Customize tool (Orange "Customize" button). Then proceed to Advanced>Images as well as Post Background. Seen in the image below.

There it is... under "Images". "I've got you now" I say in my head. I change the "Background Color" to "transparent" via the drop down selector. Hit "Apply to Blog", re-preview and all is fixed.

CAVEAT
Now this may not work for other folks using different themes and/or custom/customized themes. The other way to do this is to insert your image(s) and toggle to the raw HTML edit mode in the Post Editor and add a style tag to the image with the "background" property set to the color of the background of your blog's post background. You can do this using the following code/example.

<img src="http://blah.com/Icon.png" style="background: #222222;" />

Take note of the following part style="background: #222222;" as this is the part your going to want to change in your image to the correct hex color of your background. You can also add more style tag properties here to do other stuff as well. I won't go too far into this, you can "google" this yourself, but here are the properties I set on the first image in this post to get things to line up properly.

style="border: 0; float: left; margin-bottom: 1em; margin-right: 1em;"