This knowledge section is supposed to be about sharing what knowledge I can, after realising just how hard it can be to find the help you're looking for. With that in mind I would like to try and pass on something that is covered all over the web, but as far as I could find, never fully explained.
The subject is the creation of transparent or rather opaque effects on the web. It is often the case that the designs we come up with feature sections of opaque colour over a background in order to render text legible. In the past we've had to point out that this isn't really something that can be done unless the content is an image in itself. The following is a rough example of what might be expected.
This is an example of PNG use
Thankfully there is an image format that allows for opacity. The Portable Network Graphics (PNG) format supports what is known as Alpha Opacity which allows us to create the effects we need.
Why the fuss
Ideally we could use PNGs in the background to create an opaque panel to hold content, or as inline images themselves. The only problem is that PNG alpha transparency is supported by all browsers except one. And you guessed it that browser is IE, except that's not true for all version, IE on the Mac has native support for PNG alpha opacity.
So IE on the PC does not support PNG alpha opacity. If you use a PNG with transparent areas these will be displayed as a dull grey colour and opaque areas as the solid colour. But there is light at the end of the tunnel, for some reason they did see fit to provide us with an IE specific CSS filter that can handle alpha opacity, handily refered to as the Alpha Image Loader.
The Alpha Image Loader
The team behind IE on the PC included a number of these CSS filters. The Alpha Image Loader is the one we are concerned with here and should not be confused with the Alpha filter which is another approach to opacity that comes with it's own set of headaches and doesn't really do the job.
Before we get stuck into this there are a few things you need to be aware of before getting started.
- The filter works as a background to page elements.
- There is no way of aligning the background as you normally would with CSS.
- The background does not tile.
- The background can either sit at the top left position or 'scale' to fit the full dimension of the element without retaining aspect ratio.
- It only works on floating or absolutely positioned elements.
- PNG file sizes can be substantially bigger than .gif or .jpg files.
- Image replacement techniques can be used, but with limitations.
Be prepared to hack
As this is an IE specific fix/hack we need to hack our CSS appropriately. I would recommend using the style filtering approach as I have found it to be the most flexible.
Remember to 'double hack' your CSS to avoid applying the filter changes to IE on the Mac.
One of the major drawbacks I have found is that using the filter tends to screw with positioning on your page, most notably block level elements and links within the DIV to which the filter is applied may dissappear unless their positionin is tweaked. Don't panic though as this tends to be for seriously complicated layouts and is fixable even if it is a headache.
The basic technique
Lets presume we have the following markup of a container DIV, a nested DIV that will be our opaque background and a Paragraph.
<div id="mycontainer">
<div id="mydiv">
<p>Lorem ipsum...</p>
</div>
</div>
Step 1
Build your page and CSS for a more compliant browser like Firefox using your PNGs as normal backgrounds.
#mydiv {
background: url(/images/examples/white_80pc.png) left top no-repeat;
}
Step 2
Now we need to hack things for IE. You will need the following block of CSS for the Alpha Image Loader
/* \*/
* html #mydiv {
background: none;
float: left;
width: 300px;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='/images/examples/white_80pc.png', sizingMethod='scale'); }
/* */
- We use '/* \*/' to hide the filter from Mac IE
- We use '* html' to make it IE specific
- We set the background on the DIV to 'none' to overwrite the non-IE settings
- In this case we float the DIV to make sure the filter will be applied
- Then apply the filter.
All you should need to do is to replace the 'src' path and select you 'sizingMethod'. In this case we are using sizingMethod='scale' which displays top left and stretches the image to fill the dimensions of the element to which it is applied. You could also use sizingMethod='crop' which will display our image in the top left position non-tiled at it's original size.
Considerations
As a pretty simple example of the AlphaImageLoader this should work fine in all situations. Unforunately there are a few bugs we need to deal with.
The most notable of these is that in certain situations the AlphaImageLoader can really screw with the positioning of elements 'within' the container. This usually manifests itself as blocks becoming invisible or links becoming unclickable. I've mostly noticed this on complicated floating layouts where we have applied a transparent background to the main copy area.
To conteract this we need to nest another DIV within our affected area....
<div id="mycontainer">
<div id="mydiv">
<div class="png-fixer">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
And by giving it positioning of 'relative' we can avoid most of these problems...
* html #png-fixer {
position: relative;
}
You may still find some unusual layout issues occur. In most cases I've found it to be the case that playing with the affected elements positioning fixes the problem.
Inline PNGs
So far we've looked at how to apply Alpha Opacity as a background on an element. This is all well and good, but what about in-line images? Firefox and other more 'sensible' browsers handle PNGs natively and so we can put as many opaque images and buttons on our page as we want. So we're looking for another hack that will let us do the same in IE.
Given that this isn't something we can get away with in CSS, we have to look elsewhere. The solution I've taken to using is known as 'Sleight'. It's a JavaScript solution and as such comes with the limitation of falling over where JavaScript has been disabled, but it's the best option we have and works pretty well.
The basic premise is that when the page loads it searches for all files with the extension '.png'. It then applies the AlphaImageLoader to the background of the elements, so that they now have the nice transparent version loaded in behind the actual image. We still need to be able to see this however so the next step is to replace the source of the image with a 1x1 pixel transparent gif (which IE does support) sized to the correct dimensions of your original image.
So we have a 'window' through to the AlphaImageLoader transparent background.
Obviously it's more complicated than that, but that i believe is the basic idea. I suggest you download it yourself and try it out.
As this is a JavaScript solution that runs once the page has loaded into the browser, there is a small amount of lagtime between seeing the original 'grayed out' PNGs and the hacked transparent versions. To tackle this the script includes the ability to hide images with a certain class applied to them until the switch is made. Although this does help there is still a noticable delay.
The final point to note here is that if you are concious of how your site will look when printed, you've probably setup a print only stylesheet. You need to remember that all your PNGs have now been replaced with transparent GIFs, so they won't display for print. The only way to do this is to write some more JavaScript that will undo the Sleight changes at print time. It's do-able and once I am able to I hope to include that solution here. There does appear to be an issue with positioning that sleight causes at print time, but it can be hacked around.
Image replacement
So hopefully that's most cases taken care of. Chances are though that if you know your CSS, you might well be using image replacement techniques within your pages. Well the good news is that you can still use image replacement in conjunction with transparent PNGs, you might just have to think about it a little differently.
The standard techniques for image replacement are either 'Cover up' or 'Knock out the way.
- Cover up image replacement
- The technique involves positioning a DIV/SPAN over your text element and applying the graphic as a background, therefore masking the original text.
- Knock out the way image replacement
- In this case the image is applied as a background to the text element itself whilst spplying a fixed height to the element. Paadding is then used to 'slide' the content out of this 'window' to reveal the background only.
Normally cover up is the prefered technique as it allows users not displaying images to see the original text. However we cannot use this technique here as to cover the text with a transparent image would be pointless, given that it would show through. We therefore use the alternative 'knock out the way' method. All we have to do then is hack the CSS to apply AlphaImageLoader in order to get the transparent background in IE.
Image replacement and links
In the original specs for the AlphaImageLoader filter, Microsoft stated that the transparent area of the PNG should allow for selection of text etc, so that users could still interact with the content through what is essentialyl and empty area.
It seems however that if you should choose to use transparent PNG image replacement on a link, the reverse is true. In all examples I've come across or developed you will only be able to click on the transparent area of the image and not the actual copy/content itself. This is certainly an issue and may well be something fixable, but so far I haven't found the solution. It's probably best to think ahead on this one when designing your pages.
The issue of accessibility
All this use of opaque images to produce nice effects is well and good, but what about the impact on accessibility. One of the main considerations for building an accessible site is the contrast between backgrounds and content.
So when designing your site using these techniques it's best to bear in mind whether it is actually necessary and to what effect it will impact the experience of sight challenged visitors.
That's all folks
Hopefully that's helped clear up the issue a little. A lot of this article is based on pratcical work that I've had to revisit, so feel free to let me know if i've slipped up somewhere. Before we're done though here's a quick list of points to remember.
- Build normally and hack your pages for IE PC, remembering to avoid applying changes to IE Mac
- Ensure you get the AlphaImageLoader syntax spot on
- Remember you can't play with the backgrounds as you would normally, you are stuck with one size or scale
- PNG filesize can get much bigger than .gif or .jpg so try not to over use them
- Be prepared for unexpected glitches and factor that into your build
- You can use image replacement, but it can get tricky
- Think about accessibility and backgroudn/content contrast
Last updated 06 Dec 2004