Transparent PNGs (Yes, Even in IE6)
It will be a glorious day in the world of the Web when Internet Explorer 6 is completely abolished from every computer everywhere. I will not read from the litany of charges against this most sinister of Web applications; my own chief gripe has to do with how Microsoft implemented the PNG-24 format, and how their slip-shod work has held back the visual possibilities in Web design (without using Flash) for over 5 years.
The good news, even if it does come as IE6 is being phased out, is that we now have a workaround that let’s us make use of the transparency capabilities of PNG-24, if only for images used as backgrounds.The PNG-24 image format is now standard on all Web browsers, and, although it’s not as good as JPEG at compressing complex images like photographs, it is very good at compressing solid color images, even with slight effects such as gradients.
It’s greatest feature, though, is that it preserves the alpha channel of images. That is, you can have transparent areas in your image with an opacity anywhere between 0% and 100%. This not only opens great new possibilities and potentials for your designs, it can also dramatically improve your work flow and flexibility, since you only need cut only a single image against a transparent background which then gets re-used wherever you want it, against any color or pattern. You can then change background colors or images at will, and never have to re-cut the foreground images on top to accommodate the change.
In the image above, the black and white circles fade from 100% opaque to 25% on a gray background.
When the exact same image is placed on a red background the transparent circles allow some of the red through. Notice also, that the edges of the circle do not show the distinctive aliasing of GIF images that were indexed against a solid color. The catch is, though that the image you see is actually in the background of a layer, rather than in an img tag.
In this example, the three colored circles are at 50% opacity on a white background.
When the same image put on a black background, the colors are now darker.
Although PNG transparency will not work with blending modes like darken, lighten or overlay, it will work with effects like a drop shadow.
So that you can reuse an image with a drop shadow on any background you want.
To use a Transparent PNG in your Web page:
- Start by creating your image with transparencies in your favorite image editing program. You can set opacity anywhere between 0 and 100%. All antialiasing (transparent pixels on the edges of objects that make curves look smooth on the screen rather than jagged) are also preserved. However, if you are using blending modes, these will not be preserved. So, for example, the PNG image can not be made to invert colors underneath.
- Make sure that the background is set to transparent. In some image editing software like Photoshop and Fireworks, this means turning off the background layer so that you see the checkerboard pattern. In OmniGraffle, you will choose a transparent background option while saving in step 3.
- Save your image as a PNG-24, making sure that the Transparent option is checked. PNG-24 has a limited number of options, so there is little else you can do to optimize the image.
- In your HTML, you will need to provide an element into which the PNG is placed as a background. For this example, let’s set up a specific DIV with an ID. However, you can use any HTML tag. Often I’ll use a background image in an H1 tag to provide a graphic header treatment, while also placing HTML text in a span tag with a class called textOnly which I then hide using display:none so it doesn’t show up. This is a good practice for non-graphic browsers and for Search Engine Optimization.
<div id=”transPNG”></div>
- In your CSS, add your transparent PNG to the element from step 4 as a background image.
#transPNG {
width: 100px; height: 100px;
background: transparent url(’transparent-PNG-example.png’) 0 0 no-repeat;
}; - If you view the above code in most modern-browsers, you should now see your image with whatever is behind it on the Web page showing through in transparent areas. However, if you look at it in Internet Explorer 6, you will see that the transparent areas filled with an opaque pale blue. Although IE 6 “supports” the PNG-24 format, it did not support transparency. To fix this, we will need to add a bit of special code that turns the background image being placed by the CSS off and instead places it in there using the Microsoft the alpha channel filter.
#transPNG { width: 100px; height: 100px;
background: transparent url(’transparent-PNG-example.png’) 0 0 no-repeat;
_background: none;
_filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’transparent-PNG-example.png’, sizingMethod=’crop’)
}Use the underscore before the style to hide it from other browsers, then set the background to none, and then use the alpha filter with the same source as your background. You have two options for the sizing Method: crop and scale. Crop will only show the image once, while scale will stretch the image to fill the entire area. You cannot tile these background images.
- Now, viewing the image in IE6, it should look exactly the same as in other browsers.
- BUT WAIT! THERE’S MORE! The big draw back of using transparent PNGs in your design is that they interfere with links and form inputs in IE6. Place a link tag or form input field on-top of a transparent PNG that has had the alpha filter applied, and they will become un-clickable in the most popular browser. Fortunately, there is a simple (although inexplicable) solution: set the position type of link and form elements to relative and set the cursor type. For some reason, your links and form elements will then work as normal.
a { _position: relative; cursor: pointer; }
input {_position: relative; cursor: text; }
The downside is that this trick is that it can only practically be applied to background images and it can interfere with links and form elements (although there is a fix for that too). However, once you get used to it, you will find that you can use background images in place of the IMG tag in a lot of different circumstances you may never have considered.
I’ve used this technique to great effect in a lot of different Web sites, most notably Yuri’s Night 2008 where I used a non-scrolling gradient backgrounds with transparent PNGs in the module backgrounds on top, so that, as the user scrolls the page, the module backgrounds seem to shift their color. You can also place a variety of textures in the background and, with scrolling turned off, the module backgrounds can be made to look like glass chips as with another site I did, RED.
