Using PNG Images to Build Background Effects
(Page 1 of 4 )
Cascading style sheets are great for building all sorts of eye-catching background effects for web pages. CSS allows the utilization of JPG, PNG and GIF images, which can be easily repeated along the X and Y coordinates. This facilitates the creation of professional-looking web documents by using only a few tiny background graphics that can be downloaded quickly by way of a browser.
The use of background images for decorating certain sections of a web page is almost a must within the terrain of professional web design. Many designers only work with JPG and GIF graphics, however, due to the limited support offered by Internet Explorer 6 and below, especially when it comes to displaying transparent PNG images.
Of course, if you’re building a simple (X)HTML list that incorporates some PNG-based bulleted items, the scenario is much more familiar. Most modern browsers will display these graphics in a consistent way. Nevertheless, things get more complicated when you try to use PNG images that include transparent sections.
As you’ll possibly know, PNGs (also called “pings”) are excellent for building images that utilize alpha-based transparency. They make it possible to build gradients and other elegant effects that make use of this type of transparency. On the other hand, GIFs also support transparency, but in its binary version. In other words, GIF images simply won’t let you create areas that are “more transparent” than others, while PNG does.
This issue would be old history if Internet Explorer 6 and below supported transparent PNG images, as it does with GIF graphics. But unfortunately, we don't always get what we want, do we?
However, all is not lost when it comes to using PNG images that contain transparent areas, since it’s possible to use some workarounds that will permit you to utilize these graphics in a decent cross-browser fashion. Therefore, in this handful of hopefully instructive articles, I’m going to show you some easy-to-grasp techniques that will let you incorporate PNG-based backgrounds into your own web pages, which also will work as expected in IE 6.
Having introduced you to the main subject of this article series, it’s time to learn how to make use of transparent PNG graphics that will be displayed correctly in most modern browsers. Let’s begin right now!
Next: Building background gradients using a simple JPG image >>
More Style Sheets Articles
More By Alejandro Gervasio
