Design Oahu

Web design blog from the middle of the pacific.

IE PNG Transparency Part II

If you have not read Part I of IE PNG Transparency you should check that out real quick then come back here. If you have read it I have used this technique with only partial success. The technique is by far the best solution IMO for using transparent PNG-24 images from within an HTML img tag. However, I ran into issues when I tried using it from within CSS for background images as well as trying to repeat the background. Cameron Adams on his site The Man In Blue has showed how to use a transparent PNG in CSS which I will demonstrate.

Anytime we have an element that is to display an image in the background a star html hack will be applied to make use of the Microsoft’s AlphaImageLoader filter.

<style type=”text/html”>
#container{
width: 200px;
height: 140px;
background-image: url(”png24.png”);
}
* html #container{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”png24.png”, sizingMethod=”image”);
}
</style>

It’s not too much more work, and with the great results you can get, I think it is for sure worth doing if a semi-transparent image is able to fit it to the design. This works good and all, but I really wanted my main container to be semi-transparent so that the background will show through and the text will still be legible. I can do that but, the only problem is that rather than the image tiling it is stretched. This pretty much leaves you with only using a solid color, and the PNG might as well only be 1 pixel by 1 pixel. In my case this was exactly what I wanted anyways. I created a black pixel and dropped the opacity down to 50%. Now I am able to use a white colored font even when the background is white.

<style type=”text/html”>
#container{
width: 760px;
background-image: url(”bg-color.png”);
}
* html #container{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”bg-color.png”, sizingMethod=”scale”);
}
</style>

As you can see the only change required is setting the sizingMethod attribute to scale.

I am still looking for a solution for Transparent PNGs used as repeating background images, hopefully I will get it one day and there will be a Part III. If you would like to see my finished result check it out in Internet Explorer.

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

5 Comments

  1. Comment by gyo on February 3, 2007

    hope this helps:
    http://www.twinhelix.com/css/iepngfix/

  2. Comment by arslan on March 8, 2007

    London based website design company offers website design, shopping cart development, web development, SEO services, server administration services, web hosting.

    http://www.1websitedesign.net

  3. Comment by darki777 on March 27, 2007

    Hi,
    there is a fix for png’s (also background-image)
    http://www.typolight.org/forum/viewtopic.php?id=547

    greetings darki

  4. Comment by Ben on April 13, 2007

    This looks great. Haven’t tried it out yet but if it works it’ll make designing so much easier :)

  5. Comment by Matt on August 16, 2007

    I’ve had this problem before. What I’m trying to do is use a png with transparency as the background to a div container. its not repeating, and its not all transparent. It of course looks nice in Firefox, but not in IE. is this possible to do. Take a look at http://www.cutout-design.com to see what I mean.

    Thanks,
    Matt

Leave a Comment

Trackbacks

  1. IE PNG Transparency Part I | Design Oahu
6 Comments and Trackbacks »