STYLE SHEETS

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

Poor Best

Rating:

/ 4

May 20, 2008

TABLE OF CONTENTS:

Here's a complete example that shows how to build the same gray-colored web page gradient that you learned in the beginning of this article. This time, however, it includes the CSS workaround that will use the "AlphaImageLoader" when working with IE 6 and below to consistently display the corresponding PNG background image.

Here is the source code for this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Sample web page with PNG-based background (cross-browser version)</title>

body{

padding: 0;

margin: 0;

}

h1{

padding: 5px;

margin: 0;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

h2{

padding: 7px 5px 8px 5px;

margin: 0;

background: #fc0;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

#header{

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #fc0;

}

#navbar{

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #ffc;

}

#navbar ul{

list-style: none;

}

#navbar li{

display: inline;

padding-right: 4%;

}

#navbar a:link,#navbar a:visited{

font: normal 12px Arial, Helvetica, sans-serif;

color: #039;

text-decoration: none;

}

#navbar a:hover{

text-decoration: underline;

}

#mainwrapper{

clear: both;

width: 800px;

height: 100%;

margin-left: auto;

margin-right: auto;

overflow: hidden;

background: #fff;

}

#mainwrapper .leftcol{

position: relative;

float: left;

}

#mainwrapper .rightcol{

position: relative;

float: right;

}

#leftbar{

width: 180px;

padding: 10px;

}

#centerbar{

float: left;

width: 380px;

padding: 10px;

background: #fff;

}

#rightbar{

width: 180px;

padding: 10px;

}

#footer{

clear: both;

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #fc0;

}

.contbox{

padding: 10px;

margin-bottom: 10px;

background: #eee;

border: 1px solid #ccc;

}

.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');

}

</style>

</head>

<h1>This is the header section of the web page</h1>

<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>

</div>

<h1>This is the navigation bar of the web page</h1>

<ul>

</ul>

</div>

<h2>Section title</h2>

<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>

</div>

<h2>Section title</h2>

</div>

<h2>Section title</h2>

<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>

</div>

<h2>Section title</h2>

</div>

<h2>Section title</h2>

</div>

<h1>This is the footer section of the web page</h1>

<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>

</div>

</body>

</html>

After studying the above example, you should have a clear idea of how it functions, since it’s very easy to grasp. As you can see, the “gradient” CSS class defined earlier is assigned to the body element of the pertinent web page using either the conventional dot notation (. class name) or the * html selector, depending on the browser being utilized.

You can see how the respective web page gradient is neatly displayed by IE 6 and below by taking a look at the following screen shot:

Not too bad, right? So far, I've taught you how to use a simple CSS hack to build PNG-based web page backgrounds that are displayed consistently by most modern browsers. But the best way to master this technique is through practice, so use all the code samples shown here to create your own, and start taking advantage of alpha-based transparency.

Final thoughts

In this second chapter of the series, you learned how to utilize an Internet Explorer proprietary filter in order to build professional-looking web page gradients. These are constructed using only one PNG image, along with a solid background color. This resolves the problems that the Microsoft browser has when it comes to working with alpha-based transparency.

However, as you can imagine, this approach can be easily applied to other web page elements. This will be the main topic of the next part of the series, so you don’t have any excuses to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.