Transparent Background, Images (rendering as white)

[LuneKeltkar]

An image oddity:

I've created a number of images to go with my categories. When I created these images (using Gimp), I gave them transparent backgrounds (png format), so that they would appear to be floating on the colored background of my store. These images retain their transparent backgrounds whenever I use them in any program on my local machine. When, however, I upload them to my server, the transparent backgrounds turn into opaque white backgrounds.

I first researched the Gimp forum, but as far as I (and some tech folks there) can tell, I've properly prepared these png images for upload to the server. I contacted my host provider (Host Gator), and the tech people there tell me that Host Gator doesn't manipulate uploaded images at all, much less in a way that would change transparent backgrounds into default opaque backgrounds. I've also scoured my ZenCart stylesheets, and I can find no CSS that would cause the change.

I still feel somewhat sure that the issue must lie somewhere between Gimp and my host provider, but just in case, I thought I would ask here if anyone knows of a ZenCart peculiarity that would cause my ZenCart admin to convert transparent image backgrounds into opaque white backgrounds.

Thanks,

LuneKelkar

[gjh42]

What happens if you directly access the image on your server without going through Zen Cart handling, like
http:/ /w ww.yourdomain.com/images/yourimage.png ?

[fairestcape]

An image oddity:

I've created a number of images to go with my categories. When I created these images (using Gimp), I gave them transparent backgrounds (png format), so that they would appear to be floating on the colored background of my store. These images retain their transparent backgrounds whenever I use them in any program on my local machine. When, however, I upload them to my server, the transparent backgrounds turn into opaque white backgrounds.

I first researched the Gimp forum, but as far as I (and some tech folks there) can tell, I've properly prepared these png images for upload to the server. I contacted my host provider (Host Gator), and the tech people there tell me that Host Gator doesn't manipulate uploaded images at all, much less in a way that would change transparent backgrounds into default opaque backgrounds. I've also scoured my ZenCart stylesheets, and I can find no CSS that would cause the change.

I still feel somewhat sure that the issue must lie somewhere between Gimp and my host provider, but just in case, I thought I would ask here if anyone knows of a ZenCart peculiarity that would cause my ZenCart admin to convert transparent image backgrounds into opaque white backgrounds.

Thanks,

LuneKelkar

I use PNG with transparent backgrounds in zencart without any problem... and there is no possibility that zencart is the problem. I use photoshop (gimp claims to be the OS equivalent).

My guess is you're not saving the PNG's correctly.

[lhungil]

... When I created these images ... I gave them transparent backgrounds (png format) ... When... I upload them to my server ... the transparent backgrounds turn into opaque white backgrounds.

If you are uploading the image via the Zen Cart admin interface and have Image Handler installed, make sure Image Handler is configured to use a transparent background.

If you are uploading the image using FTP, make sure no CSS background color rules are being added to the image (or the container for the image).

Note: Really old versions of Internet Explorer (such as the version which shipped with Microsoft XP / Server 2003 and older) do not support transparent PNGs... More a note than an answer, but thought it should be noted.

[fairestcape]

What happens if you directly access the image on your server without going through Zen Cart handling, like
http:/ /w ww.yourdomain.com/images/yourimage.png ?

This is the best suggestion...

[LuneKeltkar]

What happens if you directly access the image on your server without going through Zen Cart handling, like
http:/ /w ww.yourdomain.com/images/yourimage.png ?

gjh42,

Thanks for this suggestion. I haven't solved the problem, but your suggestion brought me much closer. When I viewed my navigation images directly with their urls, they displayed online with white backgrounds. When, however, I copied and pasted the images into a document on my local machine, they had transparent backgrounds (as they should). Also, when I saved the images from my website and inserted them into a document on my local machine, once again they had transparent backgrounds. That indicated to me that the problem lies in the *rendering* of the images, not in the images themselves.

That led me to this discovery: As I said, these images are *navigation* images, hence they're links. I tried displaying a few of these navigation images without their links (that is, as just plain images), and they displayed perfectly fine: that it, they displayed with transparent (not opaque white) backgrounds.

So now I've narrowed the problem down to this: Overall, images with transparent backgrounds display fine on my website. When, however, I create links from images with transparent backgrounds, something is changing the transparent backgrounds to white opaque backgrounds. To the best of my knowledge right now, I don't have anything in CSS that would do this, but I'll scour CSS to see what I find. I used Firebug to study a few links, but didn't find anything immediately.

Again, thanks for your suggestion. Even if I don't solve this problem before the cows come home (and they're not due anytime soon), I've found the research resulting from your suggestion immensely interesting.

Lune

[LuneKeltkar]

I use PNG with transparent backgrounds in zencart without any problem... and there is no possibility that zencart is the problem. I use photoshop (gimp claims to be the OS equivalent).

My guess is you're not saving the PNG's correctly.

fairestcape,

Your guess is quite wrong. I've saved the image files properly, as evidenced by the fact that they display fine on my website when I display them as just images (that is, they display without the white opaque backgrounds). Only when I use them in links does the background problem manifest itself. I'm also quite sure that ZenCart isn't the problem, per se, but how I've configured some setting along the way. *Clearly* something in my CSS or elsewhere is causing the system to insert white opaque backgrounds behind the images that I use as links.

gjh42 above recommended an approach that has led toward a solution. When I find it, I'll post back.

Lune

[LuneKeltkar]

If you are uploading the image via the Zen Cart admin interface and have Image Handler installed, make sure Image Handler is configured to use a transparent background.

If you are uploading the image using FTP, make sure no CSS background color rules are being added to the image (or the container for the image).

Note: Really old versions of Internet Explorer (such as the version which shipped with Microsoft XP / Server 2003 and older) do not support transparent PNGs... More a note than an answer, but thought it should be noted.

lhungil,

Based on some direction from gjh42 above, I'm now fairly sure that the problem must lie somewhere in my CSS. I discovered (with gjh42's help) that the background problem only occurs with images that I'm using as links. I hadn't noticed this pattern before because all of my product images have opaque white (not transparent) backgrounds. If I can find the glitch in my CSS or elsewhere, I'll post the solution here.

Thanks,

Lune

[LuneKeltkar]

If you are uploading the image via the Zen Cart admin interface and have Image Handler installed, make sure Image Handler is configured to use a transparent background.

lhungil,

I wish I didn't have to do this, but I'm back to report that my problem with the png images in links resulted entirely from my own fumbling about. A while ago I tried to install ImageHandler 4, but the installation didn't go well, so I gave up on it, and thought that I had uninstalled the add-on. I just now, though, went into Configuration > Images, where I discovered the IH configurations there and active. Sure enough, the image backgrounds (small, medium, large) were all set to white. When I set them to transparent, my link problem of course disappeared.

Now I have the problem of figuring out what to do about an add-on that I thought hadn't installed, but apparently did, and has for a couple months now been operating without me being aware of its work in the background. Any time I manage a feat so stupid, I always wonder how I could *possibly* have been so stupid, but I manage such feats with some regularity, so one would think that I would have grown accustomed to them by now.

Thanks for the resolution,

Lune

[lhungil]

... thought that I had uninstalled the add-on. I just now, though, went into Configuration > Images, where I discovered the IH configurations there and active. Sure enough, the image backgrounds (small, medium, large) were all set to white. When I set them to transparent, my link problem of course disappeared.

Glad you were able to get transparent images working :)

Good luck on the rest of your adventure!