We help IT Professionals succeed at work.

HTML 5/CSS3 Browser Support

HelpNearMe used Ask the Experts™
Hi Experts,

I am developing a site that needs to have a background image with 60% opacity, I can do it with CSS3 but a large portion of the visitors may not have browsers that support CSS3 (older FF, IE, Safari).  

I'd like to overlay 2 images in such a way that the user can see the image underneath with an opacity/transparency of 60% or so.  How can I do this without CSS3 etc?



Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
One option would be to use PNG file format (in Photoshop Set the layer opacity to 60%, Save for Web -> Select PNG-24)... There are some hacks that allow making it work back to IE6.
Sonetinc's trick is great for IE support, but if you're working on a large site, you may not want to ass to much weight to it. There are a couple work-arounds for basic CSS3 option out there, one I use often: CSS3pie.com, and another i have heard about but not yet tried: http://r.je/css3-in-ie.html
Alicia St RoseOwner & Principle Developer/Designer
Please reread your post. LOL!

I'm using CSS3 all over the place and I'm gracefully degrading for browsers that have developmental problems. ie, IE. Everyone has access to a modern browser, right? So I'm not going to make things pixel perfect in the legacy ones.
I found this cool script that adds a class to the body tag for any browser. Then you can create a different background image for IE by using CSS in you master stylesheet and no need for conditonal stylesheets.


It's working here on this site:


If you look at it on IE, You'll see each version 7 through 9 shows the slideshow buttons slightly different...I used box-shadow and border-radius on them. But had to "hide" it in the other lesser browsers...
Also took away text-shadow from navigation in Chrome only..
It's a pretty nifty script.


Thanks everyone for the great info