[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