Building Cross-Browser Background Effects with PNG Images

In the course of the previous section I provided you with a demonstrative hands-on example of how to create a web page gradient by using only a small PNG image, which was repeated horizontally across the pertinent web document via a simple CSS style. Nonetheless, while this example will work neatly on most non IE browsers, the truth is Internet Explorer has serious problems displaying transparent PNG graphics.

Considering the aforementioned issue, it’s necessary to implement some kind of CSS workaround that allows you to build these web page gradients in a true cross-browser fashion. Fortunately, the solution for this IE-related problem is just around the corner, thanks to the technique introduced initially by Mathew O’ Neil in the following article: http://www.alistapart.com/articles/supereasyblendys.  

However, I’m going to save your valuable time and explain how this approach works in simple terms. Among the huge arsenal of visual filters that come bundled with IE 6, there’s one that's very useful in this case, called “AlphaImageLoader.” It comes in handy for attaching a given PNG image to a specific web page element.

Of course, the major advantage of using this filter is that the image in question will be correctly displayed by IE 6 and below, even if it contains transparent sections. Sounds pretty promising, right?

Therefore, based on the functionality provided by Microsoft’s proprietary filter, it’s possible to implement a simple CSS workaround that permits you to apply the  filter to the background of a selected web page only when IE is utilized, while all the other browsers should use the approach that you learned in the previous tutorial.

Actually, this concept may sound rather confusing at first, but if you have a look at the following CSS styles, you shouldn’t have major problems understanding how this workaround works:

.gradient{

background: #fff url(bg.png) left top repeat-x;

}

/* use the * html CSS hack to render an alpha-based transparent background */

* html .gradient{

background: #fff;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',
sizingMethod='scale');

}

First, I created a simple “gradient” class that will attach the pertinent PNG background image to a selected web page element. Second, I used the aforementioned “AlphaImageLoader” -- Microsoft’s proprietary filter -- to include the same image only when using IE 6 and below. In this last case, the definition of this class will simply be overridden by all IE browsers, because of the utilization of the * html selector, which is only recognized by them. Easy to grasp, right?

So, at this point you’ve learned a simple, effective CSS workaround that is very useful for displaying transparent PNG images on most modern browsers. It creates a true cross-browser approach that can also be utilized for building the fancy web page gradient that you saw previously.

However, if you’re anything like me, surely you’ll want to see how the prior CSS workaround can be linked with the corresponding structural markup of a sample web page to create PNG-based backgrounds. Thus, in the upcoming section, I’m going to set up a complete hands-on example that will show you how to build a web page gradient that uses the alpha-based transparency.

To see the details of this process, go ahead and read the next few lines. They’re only click away.