Hi
 
I want to insert product images with a transparent background. gifs are horrible (and there is the same problem with them anyway). I would like to use PNG24.
 
When I do thisI get a horrible black background. I don't think it is a browser problem as I have previewed the images in browsers and they show up beautifully transparent, so it must be something I can fix in the shop.
 
Is there a fix for this please?
 
Preferably sitewide or if not, template css driven.
Cheers
Kim

I am very keen on this - all my images go through Fireworks so .png is easy.
I use the Rainbow theme and any background I use dominates the image - a transparent bg would be excellent but the black outcome prevents this.

I have transparent backgrounds using .gif files, and have no problem. However, when I upgraded to version 3.2, I found that all of a sudden I DID have backgrounds showing up. That was due to the new CSS files parameters in use. I had to edit the CSS file and specify
 
background-color: transparent;
 
on the appropriate attribute, as well as get rid of some borders and shadowing that had been implemented. After that, my transparent backgrounds are back.
 
If you can bring up your .png file directly without using ViArt, for example use http://my.site.com/images/small/myimage.png
 
and it comes up transparent, then the CSS attribute is your problem as well.

To use PNG24:
 
* html .png {//background-image: none ! important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/logo.png,sizingMethod=crop);}
 
<img style="background: url('images/logo.png') no-repeat;" class="png" src="images/tr.gif" width="150" height="55" >
 
Note:
- first line should be used in .css file for correct display in IE 6.0 and lower
- second line is used in .html file for FF 1.5 and higher, IE 7.0, Opera 7.0 and higher.

To "battleaxe":
 
Please send us the URL of the page where you have the problem by e-mail or via our support form at: http://www.viart.com/support

8thsin
 
thanks for that... by the appropriate attribute, do you mean those relating to the images in the css files?

to Egorich
 
Thank you for the code.... do I copy and paste as they are?
 
Can you tell me where in the files I should place them?
 
thanks
Kim

to Egorich
 
It looks like the code above is for the logo only. It is the product images that I need to be transparent.
 
They are transparent in the custom block (see untitled block on home page), but black backgrounds on products latest block...
 
Why the difference?
 
How do I make the 'products latest' png24 image backgrounds show transparent (they are transparent in photoshop)
 
If you are giving me code, can you tell me which files the code should be used in and where to put the code in the file?
 
kind regards
Kim

Battleaxe - yes, the attributes related to the images. Use Firefox and it's web developer tools, you can instantly determine what CSS attributes need to be changed.

OK
I have discovered what is happening.
 
It is a bug/issue in the software.
 
If you use the admin products page to upload the png or gif, it somehow mangles the file to make the backround not transparent.
 
If you use an ftp client such as cute ftp, it uploads the image without affecting the transparency.
 
What was killing me was that if I viewed my image in a webpage directly from my pc, it showed up transparent, but if I uploaded it in the normal way from admin and viewed the image directly from it's url, the background was black.
 
I will set this up as a support ticket.
 
Thanks for your help 8thsin (what is the 8thsin anyway?)
 
cheers
Kim

The 8th Sin is coffee. http://8thSinCoffee.com/

Hi,
Use auto detect in CuteFTP to upload the PNG24. Binary upload in CuteFTP removed the transparency. I suggest its a binary v ASCII issue.

..and
if you edit a custom block the transparency issue also arises. Better off doing a select all and delete in the block and paste in fresh source code from notepad. Ya - strange fix!

I have no problems now with .png files - but, then, I ftp all my images
Chris

I had a similar issue in regards to a dark background block displaying behind my .png dynamic (php) watermark.
 
My error was that I saved it as a PNG-24. It took me a while to pinpoint my error, but I came across this blurb by
Adobe Help:
 
"Note: In browsers that do not support PNG-24 transparency, transparent pixels may be displayed against a default background color, such as gray. "
 
It was in very small type.
 
So with that new found knowledge, I simplified the watermark and saved it as a PNG-8 and it works just fine.
 
Hope that helps!

It's now 2012 and I thought this had been resolved with V4 and admin uploads of PNG and GIF files...am I wrong on this?
 
Ed

Just tested with PNG-24 image and it has both uploaded and resized correctly. Please send your example via support page.
 
There could be a problem with GIF animation if automatic resizing is activated in Settings > Products > Products Settings > Images, in that case you just need to disable resizing and animation will remain.
 
Regards,
ViArt Team