PNG Image Transparency In WebPages – Download Example

by Hiroshi on 17-02-2008

This example will show you how to use a transparent PNG image in a webpage. When it comes to slicing and using images in webpage, we have to use some images in gif form sometimes particularly for curves and rounded corners while creating boxes by images for webpage. We use images in background. Give any gif a shadow or glow, export it transparent and use it in webpage and you will see that transparency quality is not so good.

We know that PNG gives us transparent background in sharp quality but when we use this PNG in webpage, it will have a default background in all browsers.

Now we will tweak this a little bit and add a style sheet to that particular transparent PNG image or you can use style sheet to IMG tag which will be applied to all transparent PNG images of website and add a PNG behavior HTC file in the same folder and we are done. Now all the transparent PNG images at website or page will have exact sharp fine quality transparency. I have tested it for IE, Mozilla Firefox, Safari and Opera browsers and it works fine. Download the example below.

Download transparent PNG background example in webpages

P.S. For this script IE version requirements are 6. And I did not try this for background PNG image. For more powerful, compatible and cross browser solution download another flavour of the script.

Download More Powerful Solution For Transparent PNG Issue

Share it!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • LinkedIn
  • Live
  • MySpace
  • Netvibes
  • PDF
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

    Related Posts

    Searches for Topic

    png samples, xml png image, source html png picture transparent, Show PNG transparent in IE, script for show png image in ie, sample transparent png file for background, sample transparent png background, sample png image with transparency background, sample png files transparency, sample png compatable script, rss png with transparent background, png transparency use mozilla and ie6, png transparency quality, png transparant safari, png to flash with transparency actionscript, png picture not invisible, transparance on webpages, transparency examples png, xhtml website with png image, xhtml transparency, xhtml png files, xhtml image transparent background, wordpress gif download transparent, website samples W3C, webpage transparency, web pages with transparency in mozilla, turn transparency on png i html, transparent safari image, transparent pngs on websites, transparent png samples, transparent png on windows form, transparent backgroup website, transparent background form image png in ie, png image transparency in mozilla, png background transparent ie6 google, flash transparent png, flash image transparent xml, flash ie6 transparency sample, firefox detect images with transparency, fine webpage samples, exemple html photo, exemple form html, example of good png on website, download transparent png for website, download PNG transparent backgrounds, donner exemples des images png, create png transparency online, create png from xml, AS3 transparent png xml, add transparent png to webpage, free download transparant image png samurai, free transparant png, make sharp transparent png, make png transparent online, INVISIBLE background PNG image, image transparent examples downloads, image transparent backgraund shadow samples, image transparency quality, image transparency mozilla, image transparency in email, IE6-image transparency recover, html form image submit png transparant, html email transparent PNG, how to show png in stylesheet, how to create png images for webpages, how to add transparency to an png image example, HOW MAKE PNG TO XML, add transparent png css

    Post a Comment

    Comment will appear here after approval, Thanks for patience