Member Avatar for prachipote

I am trying to use a transparent png image on a site.
its work in firefox but in IE white background is still showing.
please suggest

  • 4 Contributors
  • 4 Replies
  • 89 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

described a PNG that is transparent in Firefox but shows a white background in IE; that plus and 's notes point to two separate areas to check: the actual file format and how old versions of IE handle alpha, and how different displays/browsers handle color and gamma. First, confirm the image truly contains an alpha channel (open it in an editor and toggle the background layer). PNG-8 gives only 1-bit (on/off) transparency and will look jagged; PNG-24/32 carries full alpha. Different monitors, color profiles, and historical browser gamma handling can also make the same PNG look lighter or darker on different machines.

Practical troubleshooting and quick fixes:

  • Verify format and alpha in an image editor and re-export using a proper PNG-24/32 (use "Save for Web" or an export that preserves alpha).
  • Test the image over a contrasting background color to confirm translucency.
  • Provide a CSS fallback color so older browsers degrade gracefully:
.icon {
  background-color: #ffffff; /* fallback for browsers without alpha support */
  background-image: url('icon.png');
  background-repeat: no-repeat;
}

As and noted, fixes that inject filters or use scripting to emulate alpha in ancient IE can introduce layout or clickability problems; they are trade-offs. If support for IE6/7 is not required, prefer native PNG-24/32 (or SVG/icon fonts for UI elements). If legacy support is required, serve a one-bit fallback (PNG-8/GIF) or restrict JS/filter fixes to background images only and test interactivity thoroughly.

Recommended Answers

All 4 Replies

Member Avatar for seoindia

Use CSS property to set the value..

Member Avatar for prachipote

we have tried that also but its not worked.

now its looking diffrent in diffrent screens why its happening?

Member Avatar for macneato

If its IE6 or 7, you will need a png fix or go for PNG-8 instead.

Member Avatar for ko ko

Put this in your head section of HTML document.

<!--[if lte IE 6]>
img#yourimage {
background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_image.png',sizingMethod='crop');
}
<![endif]-->

But, it was not a complete solution. It may cause some hyperlinks dead when you use this image as background under any layers where hyperlinks is on it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.