How to Post Transparent Gifs or Png on Blogger





click to enlarge
If you host your gifs and pngs using the picture uploader on Blogger, be sure to set your image background to transparent. Otherwise your images, signatures, etc will have a background , border and/ or shadow around them.  Set border around images to transparent as well in your template.
 

You will have to go inside the html template to remove shadows,etc from them if you don't find it on the template "Customize".
Always , always save your blog first before you change anything!

Once you find the shadow and moz opacity, just set all the numbers to zero.
You will see something that looks like this:
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}
This is what controls your image shadow on the blog. If you set a background, all images will have a background.
My images are set to have no background and no border and no shadow.
Set all the numbers  to zero and you will remove the shadow.
NOTE: You dont have to go inside the template if you can access the shadow through customize!
The higher the last (4th from left) number,  the darker the shadow around  your photos and images.
If you have no background set for your images and still get a background, then you will have to host them elsewhere like Photobucket or Image Shack.

If you are unsure, I will be happy to help.

3 comments:

  1. I was able to do most of what you suggested... I set the bg and border color to transparent and I went into the html (it wasn't available thru advanced -> customize) and changed the last number in those three areas to zero. Will have to try hosting a graphic on photobucket or image shack. Looks like they (at least image shack) add a credit to their site if you just copy what they suggest.

    ReplyDelete
  2. I must have misunderstood Darylynn and thought the image background was not transparent. Thanks for the help and explanation Annie. Hugs

    ReplyDelete
    Replies
    1. At first I thought it was just using Blogger as a host, but then I realized her gifs were transparent and that it had to be that her settings were for a background, border and shadow around all images.

      Delete

Please Comment and let me hear from you!