If you come across websites with similar concept, feel free to post a comment here.
A few days back while working for a MAJOR client (sorry, can’t mention their name), I discovered something new (I hope it’s new ) – A pure CSS based image replacement solution for IE. This method is helpful especially to solve the PNG issue in IE6. I know there are many CSS hacks available out there to solve the PNG transparency issue, but this method doesn’t need any hacks!! Interesting isn’t it?
Step-1: Let’s review the HTML part first.
| 01 |
|
| 02 | <html>
|
| 03 | |
| 04 | <head>
|
| 05 | <title>ProductiveDreams</title>
|
| 06 | <link href=”style.css” rel=”stylesheet” type=”text/css”/>
|
| 07 | </head>
|
| 08 | |
| 09 | <body>
|
| 10 | <div class=”bg-image”></div>
|
| 11 | </body>
|
| 12 | |
| 13 | </html>
|
| 14 | |
The following are the images that I've used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.
Colorful PNG Image
Desaturated GIF Image
Step-2: The stylesheet
I included the following code in the stylesheet
| 01 | body{
|
| 02 | background:#000;
|
| 03 | text-align:center;
|
| 04 | }
|
| 05 | |
| 06 | div.bg-image{
|
| 07 | background:transparent url(images/pd.png) no-repeat center !important;
|
| 08 | width:134px;
|
| 09 | height:134px;
|
| 10 | } |
Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I've specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?
Step-3: Solution for IE
This the most interesting part that does the magic.
I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);Check out the result in IE! Awesome.... isn't it? In all other browsers except IE you will see the colorful png image.
Consolidating the entire thing
So. the final css would look like:
| 01 | body{
|
| 02 | background:#000;
|
| 03 | text-align:center;
|
| 04 | }
|
| 05 | |
| 06 | div.bg-image{
|
| 07 | background:transparent url(images/pd.png) no-repeat center !important;
|
| 08 | background-image:url(images/pd.gif);
|
| 09 | width:134px;
|
| 10 | height:134px;
|
| 11 | margin:0px auto;
|
| 12 | } |
For your ease, I have attached the sample files as a zip. Feel free to download it
and do let me know your feedbacks.
![Download CSS Solution for image replacement]()
