Sign Up | Login

Setting a custom background color

Img to CSS can preserve transparency when it converts transparent PNGs. However, it must use the "opacity" style attribute, which is not supported by some email clients.

Some of the transparency effects can be preserved by specifying a custom background color, an option which is available to paying users.

How Transparency Works

Below, we have put the same Wikipedia logo in front of two different colored backgrounds. Since the image has transparency, the background color shows through the image.

If the image was not transparent, and had a black background, it would look like this:

Replacing Transparency with a Custom Background Color

To preserve the effect, we should convert the image using the matching background color. The left has hex value #FFBFBF, and the right has hex value #FFFFDF, so we will convert with those hex values as the new respective background colors. We get:

We don't get the full effects of transparency, because if we change the background colors, the image will once again have a box around it: