{"id":1594,"date":"2009-01-02T10:18:13","date_gmt":"2009-01-02T17:18:13","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1594"},"modified":"2015-02-25T19:40:10","modified_gmt":"2015-02-26T02:40:10","slug":"32-using-the-unit-png-fix","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/32-using-the-unit-png-fix\/","title":{"rendered":"#32: Using the Unit PNG Fix"},"content":{"rendered":"<p>Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display&#8230; but any areas of alpha transparency get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS &#8220;filter&#8221;. A newcomer on the scene is the &#8220;Unit PNG Fix&#8221; which is ridiculously easy to use. Simply link up a very tiny JavaScript file in your header and you are done!<\/p>\n<p><strong>Links from video:<\/strong>\t\t\t<\/p>\n<ul>\n<li><a href=\"http:\/\/unitinteractive.com\/labs\/unitpngfix.php\" rel=\"noopener\">Unit PNG Fix<\/a><\/li>\n<li><a href=\"http:\/\/www.my-debugbar.com\/wiki\/IETester\/HomePage\" rel=\"noopener\">IE Tester<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display&#8230; but any areas of alpha transparency get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":333543,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-mode\/","url_meta":{"origin":1594,"position":0},"title":"mask-mode","date":"February 3, 2021","format":false,"excerpt":"The mask-mode CSS property indicates whether the CSS mask layer image is treated as an alpha mask or a luminance mask. .element { mask-image: url(sun.svg); mask-mode: alpha; } Syntax mask-mode: alpha | luminance | match-source The property accepts one keyword value, or a comma-separated list of two or all three\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3730,"url":"https:\/\/css-tricks.com\/snippets\/css\/png-hack-for-ie-6\/","url_meta":{"origin":1594,"position":1},"title":"PNG Hack\/Fix for IE 6","date":"September 4, 2009","format":false,"excerpt":"For CSS background-images .yourselector { width:200px; height:100px; background: url(\/folder\/yourimage.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\/folder\/yourimage.png',sizingMethod='crop'); } Cannot be used with repeating, needs fixed with and height. For inline HTML images img, .png { position: relative; behavior: expression((this.runtimeStyle.behavior=\"none\")&&(this.pngSet?this.pngSet=true:(this.nodeName == \"IMG\" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = \"none\", this.runtimeStyle.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\" + this.src + \"', sizingMethod='image')\", this.src =\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335415,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-type\/","url_meta":{"origin":1594,"position":2},"title":"mask-type","date":"March 2, 2021","format":false,"excerpt":"The mask-type CSS property indicates whether the SVG <mask> element is treated as an alpha mask or a luminance mask. mask { mask-type: alpha; } When the mask layer is an image or a gradient, a mask-mode property can be set on the HTML element to specify the type of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1536,"url":"https:\/\/css-tricks.com\/video-screencasts\/9-starry-night-3d-background-with-the-parallax-effect\/","url_meta":{"origin":1594,"position":3},"title":"#9: Starry Night: 3D Background with the Parallax Effect","date":"November 24, 2008","format":false,"excerpt":"Using three layers of alpha transparent PNG files, we can can create a pseudo 3-dimensional looking background for a web page. This screencast covers how to do that from start to finish. Since Internet Explorer 6 and under do not support alpha transparency in PNG's, this screencast also covers how\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305793,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-image\/","url_meta":{"origin":1594,"position":4},"title":"mask-image","date":"March 29, 2020","format":false,"excerpt":"The mask property in CSS allows you to hide parts of an element. For example, if you have a black and white image, you can apply that as a mask and the black parts will force the element to be transparent on that elements. Masks can also match the alpha\u2026","rel":"","context":"In \"mask\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/image-and-mask.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3392,"url":"https:\/\/css-tricks.com\/video-screencasts-3\/","url_meta":{"origin":1594,"position":5},"title":"Video Screencasts","date":"August 12, 2009","format":false,"excerpt":"#40: How z-index Works Running time: 18:37 Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it's tied to positioning, some quirks, and some general advice. #39: How to Use sIFR 3 Running time: 22:10 sIFR (Scalable Inman Flash Replacement) is\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1594"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1594"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1594\/revisions"}],"predecessor-version":[{"id":18069,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1594\/revisions\/18069"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1594"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}