Landing Pages Look Different In Internet Explorer/Chrome -- Problems with "Opaque Image

[Anonymous]

I built a landing page that looks great in Chrome, but is barely viewable in IE. Specifically, I used an "opaque" image with 10% opaqeness behind the text. In Chrome it looks great. In IE, the image is not opaque at all and appears as a normal image. Does anyone know a solution for this problem?

[Anonymous]

Hey Stephen,

Opacity is really a "modern browser" feature that may not work perfectly in older versions of IE.

For cross browser compatability, I would recommend using the solution found here.

[Anonymous]

Max is correct.  Another option I would try is to create the image in photoshop and add the opacity there, then upload the image exactly as you want it to appear.  You can avoid browser issues with this method.  However, from a design POV, modern design is moving away from background images like these to cleaner, more flat designs. It also helps with readability.

[SanfordWhiteman]

@Stephen S There are enough very different IEs in the wild right now that you can't just say "IE."  If you are forced to support IE 8 (let alone IE 7) opacity is known to be pretty wack.  However, modern IE has no problem at all keeping up with the Chromes and Firefoxes.  What exact version of IE are you talking about, and what is the URL in question?