Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Thursday, June 18, 2009

Png fix for ie6 using css

Many of the cases we would be like to have a transparent image, which is other wise called png image for our websites. Like if we need an image which is going to place in different backgrounds, we can use a single transparent image inorder to have multiple images. This is done for the purpose of site optimization and performance.

The true color (png24) will be supported by all major browser except ie6. This will automatically create a grey background because ie6 cannot recogonise the alpha filter option. So what we do? Yes we got a simple Css hack to overcome this issue.

Here is the hack
HTML Code
For Example:
<span id="alImg1">
<img border="0" src="images/htw.png"/>
</span>

CSS Code
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }

In the above example i have htw.png. So use the id like how i have specified and call it with in the css.

Note:
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }
In this case also you need to specify the image path.

Labels: , , , ,

5 Comments:

Anonymous Anonymous said...

This doesnt work..
I have grave background behind the png-s.

tell me where I am wrong
goran_neskovic@hotmail.com

September 21, 2009 at 4:07:00 AM PDT  
Anonymous Anonymous said...

This post may be a little late, but this does work with a bg image. See below and add your own code.

#bg-img{
background-image:url('background.jpg');
width:500px;
height:550px;
}

/*this floats your 2 images over your bg image. postition how you want and add more if you like*/
#change-position{
margin-top:230px;
background:transparent;
}

/*place a cursor type over the images (if they are links) as ie6 doesn't understand in this case - typical!*/
#img1 img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#img1{display: inline-block;}
#img1{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your-1st.png'); cursor:hand;}

#img2{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#img2{display: inline-block;}
#img2{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your-2nd.png'); cursor:hand;}

December 28, 2009 at 8:56:00 PM PST  
Anonymous arun said...

here i cld nt understand how it cld help in background image?

December 25, 2010 at 3:14:00 AM PST  
Anonymous Anonymous said...

how can i set png as background?

August 12, 2011 at 2:47:00 AM PDT  
Anonymous Anonymous said...

svs

September 22, 2011 at 11:18:00 PM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home