1

I have a img which renders png images. The html structure will look like -

<img src="abc.png" />

It all works well in all browsers except IE8 where the still rendering images is having a black background. In all the other browsers it is transparent (means the background of its parent is seen)

enter image description here

What is the issue? Is it fixable?

Ashwin
  • 12,081
  • 22
  • 83
  • 117

1 Answers1

3

Try adding the below to your CSS, where you may want to change img to a more precise selector for your image, see this question on SO for further information which may be of help to you, I would also recommend you have a look at this article.

img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;    
}
Community
  • 1
  • 1
SW4
  • 69,876
  • 20
  • 132
  • 137
  • In my project there are options where user can zoom the image to 50%, 100%, 150% etc. Can I remove `zoom:1`? – Ashwin Dec 17 '13 at 10:06
  • You're probably OK to remove `zoom`, you may need to look at the linked articles and find the correct solution to work for your specific situation however- its hard to be more precise without access to code. – SW4 Dec 17 '13 at 10:09