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.
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: css hacks, ie6 png fix, png fix css, png ie 6, Site Optimization
5 Comments:
This doesnt work..
I have grave background behind the png-s.
tell me where I am wrong
goran_neskovic@hotmail.com
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;}
here i cld nt understand how it cld help in background image?
how can i set png as background?
svs
Post a Comment
Subscribe to Post Comments [Atom]
<< Home