Building Cross-Browser Background Effects with PNG Images
(Page 1 of 4 )
One of the most useful characteristics of PNG images (also called “pings”) is their great support for alpha-based transparency, a feature that makes them ideal for building professional-looking web page gradients. Nonetheless, as you possibly know, Internet Explorer 6 doesn’t render these graphics correctly when they contain transparent sections. Keep reading to find out how we can fix this problem.
The good news is that it’s possible to implement some simple workarounds with the assistance of CSS specification in order to tackle this IE-related issue. This makes it possible to build fancy web page backgrounds that use partially-transparent PNG images, and all with cross-browser capabilities.
But you’re probably wondering what steps are required to learn these workarounds as painlessly as possible. The answer is actually simple: jump forward and begin reading this article right now! Hopefully, by the end of this tutorial, you’ll be equipped with the necessary background to start building PNG-based web page gradients that will be displayed consistently on most modern browsers.
Now that you’re aware of the topics that are covered in this article series, I will review the concepts that were discussed in the last installment. This will help you grasp how they’ll link with the ones that I plan to deploy in this particular tutorial.
In simple terms, I finished the preceding chapter by demonstrating how to build a basic web page that had a background comprised of one single small PNG image tiled horizontally across the web page in question. Obviously, the most relevant thing to notice here is that this web page background used the alpha-based transparency that I mentioned earlier to achieve a smooth gradient effect along the entire web document.
As you may have guessed, this approach simply doesn’t work as expected with IE 6 and below, because it lacks appropriate support for PNG graphics that include certain transparent areas. This can be a big headache if you’re trying to construct web page backgrounds that will be displayed consistently by the majority of modern browsers.
However, as I said before, this issue can be fixed with relative ease via the implementation of a few CSS workarounds. Thus, in this second article of the series, I’m going to show you how to apply them. This will facilitate the creation of web page gradients that use alpha-based transparency to achieve this fancy visual effect.
Now it’s time to start learning a few simple approaches with CSS that will let you build lightweight, PNG-based web page gradients that will work with most browsers. Let’s go!
Next: Review: Working with alpha-transparent PNG graphics >>
More Style Sheets Articles
More By Alejandro Gervasio
