Member Avatar for Cats777

I've been messing around in Photoshop to create a 1x1 semi-transparent image to use as a background on parts of my website. It has been successful to a degree. The transparency works in Firefox and Chrome, but fails miserably in IE, where the background is completely opaque. I think there's something I must not be doing right in PS. All I did was set the opacity on the layer to 30%. Should I be doing something more?

I know it has to work in IE, because this page works perfectly in IE.

  • 1 Contributor
  • 1 Reply
  • 94 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Cats777

Dani AI

Generated

As found, the root cause was the page running in quirks mode: without a proper DOCTYPE Internet Explorer can switch to legacy rendering and handle PNG alpha differently. See MDN for a short explanation of DOCTYPE and quirks mode (Doctype, ).

Checklist and practical tips to avoid opaque PNG backgrounds in IE:

  • Ensure a standards DOCTYPE is present (HTML5 <!DOCTYPE html> is the simplest). Use IE's F12 developer tools to confirm the Document Mode is standards, not quirks.
  • Confirm the file really has a full alpha channel. In Photoshop use Export As / Save for Web and choose PNG-24 with Transparency and Matte set to None so no background matte is baked into the pixels.
  • Watch out for layer compositing: reducing layer opacity and then flattening against a matte can produce semi-transparent-looking pixels that are actually premultiplied; exporting with true alpha prevents halos.
  • For very old IE (IE6) which lacks full PNG-24 background alpha support, use a known workaround (for example DD_belatedPNG) or serve a simpler fallback. Modern IEs (9+) and current Edge/Chromium handle PNG alpha correctly once the DOCTYPE is fixed.

Debug strategy: swap in a known-good PNG with full alpha (download a simple PNG-24) to rule out export issues, check server sends the correct MIME type for .png, and confirm no CSS rule is overriding the background with a solid color. With a proper DOCTYPE plus a true PNG-24 export, cross-browser alpha backgrounds are reliably achievable.

Member Avatar for Cats777

SOLVED!
Adding a doctype tag in the source code somehow fixed 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.