[thelist] IE6 .png transparency fix for CSS Backgrounds?

Jono Jono at charlestonwebsolutions.com
Fri Nov 9 09:44:00 CST 2007


Jon Hughes wrote:
> Howdy List,
>
> I have used a few different .png transparency fixed for IE6, ...but I cannot for the life of my find one that works with CSS
> backgrounds:
>
> e.g.
>
> #mydiv {
> Background-image:url(grafx/transparent.png);
> }
>
> Can anyone refer me to something that would make this work?
>   

What I do is use the .htc approach, feeding a unique image to ie 6 via 
filters or Conditional Comments.  Due to the limitations mentioned in an 
earlier email - no repeating or positioning support in ie with 
transparent BG images; as well as potential for massive file sizes - I 
avoid this when possible.

*Step 1*:
Set up and apply your .htc file.  I like to apply the .htc file 
specifically to the container as opposed to the entire body area.

/* IE Transparency Fix
------------------------------- */
* html #sideNav {
	behavior: url(iepngfix.htc);
	}


*Step 2:
* Where the badness begins - Create a background .png image that is 
large enough to cover the entire background area.  Because you cannot 
repeat the PNG vertically in IE, you will have to make the image tall 
enough to cover the entire width & height when it is positioned in the 
top left corner of the container.  This is not always possible, 
depending on the complexity of your background iamge.


*Step 3:
*Create and apply (via filters and/or Conditional Comments) a style or 
css file, just for IE, to the area where you need transparency.  

/* Transparent Image for IE 6
------------------------------- */
* html #sideNav {
	background-image: url(bg-leftnavIE.png); /* large enough to cover entire area w/out repeating */
	background-position: 0 0;
	}

This approach leads to increased page size due to the necessity to create the large background image for IE.

In a quick test, my "bg-leftnavIE.png" went from being a 2kb repeating 200x10 pixel image to a 11kb 200x800 pixel image for IE.



-- 

*JONO YOUNG*
Designer | Developer | Illustrator
Charleston Web Solutions <http://www.charlestonwebsolutions.com>
/Bringing Higher Standards to the Lowcountry/




More information about the thelist mailing list