Home arrow Style Sheets arrow Using PNG Images to Build Background Effects

Using PNG Images to Build Background Effects

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
May 13, 2008
  1. · Using PNG Images to Build Background Effects
  2. · Building background gradients using a simple JPG image
  3. · Building a basic background gradient using a GIF image
  4. · Building a fancy web page background with a PNG graphic: introduction

print this article

Using PNG Images to Build Background Effects
(Page 1 of 4 )

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!

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials