What is the best to display a transparent image on a website?
I've done CSS for many years, but I've always tried to stay away from Transparent images or backgrounds due to the lack of support on older browsers. Right now I need to create rounded borders, and I know you can do this in CSS3, but just as well I can use a .png image. Neither is supported on ie6 - except there is a .png fix for ie6 which seems to work sometimes - so I'm wondering what the best approach is.
25% of my viewers use ie6 (most from middle eastern countries), so even though I wish I can pretend ie6 doesn't exist, I must.
I believe that most (if not all) .png fixes do not work for repeating or positioned backgrounds, so you will need to use a single image as the background. You would need to re-create these Background Images if the content of your site changed to have longer blocks of copy in these areas, as the static background images will not scale to your content.
Consider the fact that using a .png is not the best choice in terms of accessibility for visually impaired users.
For users which need to have an increased font size for reading text on screen, the text may end up running outside of the container with the .png background, and may in these cases become unreadable.
The best bet may be to use css3 to style the container, and have it fall back to square corners for IE users.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here