Home arrow Style Sheets arrow Building Cross-Browser Background Effects with PNG Images

Building Cross-Browser Background Effects with PNG Images

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
May 20, 2008
  1. · Building Cross-Browser Background Effects with PNG Images
  2. · Review: Working with alpha-transparent PNG graphics
  3. · Building cross-browser web page gradients with Microsoft’s proprietary AlphaImageLoader method
  4. · Building a web page gradient that will work the majority of modern browsers

print this article

Building Cross-Browser Background Effects with PNG Images
(Page 1 of 4 )

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials