does anyone know where i can find the HTML codes to make a image that isn't transparent on a web page to where its transparent at all times?
Printable View
does anyone know where i can find the HTML codes to make a image that isn't transparent on a web page to where its transparent at all times?
Whether or not an image can appear transparent at all depends on two key factors:
- The file type - There are only certain image file types that have the properties to be able to use transparency. Two of the most known are GIF and PNG. PNG is the better of the two using alpha channels and such.
- The web browser – Here’s where we come back to one of the banes of every web programmer, browser compatibility. Like I mentioned above, PNG is leaps and bounds above the GIF format. Unfortunately, only standards compliant browsers(i.e. Mozilla based browsers) support PNG. Well, that means that it should work with all the latest browsers then, right? – wrong.
Internet Explorer, while it has gotten better with version 6.0 in terms of standards compliancy, it still has a long way to go. And it still has a long way to go to support PNG files correctly. What does this mean to the web programmer?There are hacks that you can find on the net that supposedly get IE to correctly display PNG’s but I have yet to find one that didn’t break the site in some other fashion, so I don’t recommend that route.
Well, it leaves us with two options:
Not exactly a great set of options.
- Stick with the inferior and ancient GIF format so everyone can see our webpage in all its crappyness, or
- Use PNG’s that will appear correctly in only about 10% of the user’s browsers that come to our site.
Your best bet is to make a jpeg out of the image fading into the background color of the webpage. That way it will look like there is transparency when, in fact, there is not.
Or if you want to hook up with some CSS fading, meaning it won't be plain HTML, you can code your way around most browsers with a JPEG image. Firefox, IE, Opera, etc are "supported" with the new standards (ie: the fading will appear). Although of course, you'll be moving into CSS standards and IE is a little fussy with those too.
http://www.mandarindesign.com/opacity.html (more examples, and full code)
http://www.quirksmode.org/css/opacity.html (more for those familiar with CSS, but not opacity.