>> 24 March 2010
Lucky for me, the background on my blog is white so my readers and I often fail to notice the effects of transparent .GIF and .PNG files.
But in designing darker Blogger templates I've noticed that the issue comes up where supposedly "transparent" items have a white background. In a recent blog post from Susie Jefferson of 1stFloorFlat she offers some quick and dirty work around solutions and it's worth checking it out over there.
I just wanted to take a moment to explain what is going on.
As examples, below are two images of the exact same transparent .PNG file I uploaded to Blogger. Click on them to embiggen.
Indeed one of them showed a white background as if it was mounted on a piece of copier paper. It just looked horrible! But then with a little hacking, I managed get the file to display its glorious transparent background. (Note since this blog has a white background as I mentioned previously I used screenshots from a blog I'm designing with a darker background).
Now this file (courtesy of the Graphics Fairy) is rather large. I made a .PNG out of it that measures 1000px wide so therefore I selected Picasa's embed code of "400px" to ensure it would fit properly in the main column. For those of you that don't know, all images posted to Blogger are stored in Blogger's sister site Picasa Web Albums, a photo sharing site provided by Google.
Notice the white bits peaking through around the edges?
Well below is how I resolved it:
Notice this image has no bright white lines around the border. It's completely transparent! This is my workaround solution: take the original size and code the dimensions by hand like so:
- Grab the URL for "Large 800px" (image only, no link).
- Remove the the part in the URL that reads s800/. Be sure to include only one (1) slash not two.
- Insert the URL into your blog by handcoding the dimensions so that it fits precisely in your column. Example: <img src="THE ENTIRE URL WITH S800/ REMOVED" width="DESIRED WIDTH IN PIXELS" />