View Full Version : iframe transparency problem? impared backgrounds of pictures?

09-30-2007, 09:39 AM
Hi all,
I want my iframe to be tranparant and this is my code for this purpose included in the <iframe></iframe> line:

allowtransparency="true" style="filter: chroma(color='#FFFFFF');"

This works well, but the backgrounds of jpg pictures on the page are viewed with blacks instead white, which is the original color, and this is very bad :( How can I prevent backgrounds of pictures displayed in the iframe to be not transparent? What is the style for <img></img> tag for this problem? Please help..

09-30-2007, 09:15 PM
i've dealt with transparency a lot. especially semi-transparency and have a thread open in another forum where i got a lot of help and suggestions and possily like 3 or so diffrent methods of attacking the problem depending on the situation. but i am not familiar with filter: chroma at all.

i did a search for it and got this


also. i tested these in opera and FF and they only work in IE.

so aside from that, my only guess is getting rid of the filter: chroma

try this example isntead which i just found right now using keywords "transparent iframe"


09-30-2007, 11:24 PM
Convert the jpg's to png's which support transparent backgrounds, but IE6 and earlier do not support png's natively, so you will need to include a js routine so they work properly in those browsers.

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
for(var i=0; i<document.images.length; i++)
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1

Save this as "png.js" and reference it from your html page with the following:

<script defer type="text/javascript" src="../../png.js"></script>

10-01-2007, 09:37 AM
holy moly this will make png's work in ie6? >.< the holy grail!

*saves this right away*

ty so much. i'm glad i came here now. i needed this so badly.

10-01-2007, 08:37 PM
ok. i'm trying to apply your suggestion, jlhaslip, and i'm not sure if i'm doing it correctly.

i copied all the stuff in the first code box into notepad and saved as png.js. then i typed and pasted the code in the second box in the html page i want to use it on. i change the src to the correct location that i uploaded the png.js file to. so it's pointing to the correct file. and i tried entering that code within the header at first, got nothing, then took it out of the header ands till got nothing.

am i doing it wrong? i'd love to get this to work.

thank you.

10-02-2007, 02:23 AM
try this link in ff and then IE6


It takes a second pass for the png to become transparent, but it works.
I re-located the png.js file so the double back reference is no longer there, but that is all I changed, besides adding the second header image. It is a transparent background png. Snag it to confirm that.

10-02-2007, 04:56 AM
that looks fantastic. but i'm still stuck making it work on my site. >.<

i tried to apply that here


and if it works. i'm going to apply it to 5 of the styles here


all the styles that end with the word "sky" are ff only which i am hoping to make work for IE with this.

but i can't figure out what i'm doing wrong. perhaps my png's are not correct? or this script cant' do semi-trans only full trans?

10-02-2007, 10:34 AM
One thing I noticed is that your site has all of those images as background images declared in the css file. I believe the script I posted works on the images in the HTML page only, so perhaps you need to declare the images as inline css styles?
Only thing I can think of...

10-02-2007, 06:18 PM
that's good enough for me. i will try that out immediately.

ty. i'll post back with results. :)

10-02-2007, 06:30 PM
ok now i'm stumped for sure. it still didn't work! >.<

i tried it here this time


it's a whole month of archives.

so wierd. i hope when/if i figure this out, it won't be a pain when i attempt it in my forums. :p

10-03-2007, 06:49 AM
<div class="entrybox" style="background-image:url(http://www.legionofangels.net/forum/images/styles/darksky/darkbg1.png)">

remove that bg image and see what happens in ie6. it appears to be a 5 x 5 pixel grey repeating image.

10-03-2007, 08:56 PM
remove it? with nothing in it's place? how will it know what to use?

darkbg1.png is indeed a 5x5 pixel semi transparent png. i made it in photoshop with a setting of i think 50% opacity. i could make it bigger but i thought there was no need and i should save on file sizes so i made it teeny. it tiles anyay so it makes no diffrence.

in firefox, the semi-transparency looks so awesome.

i am not sure what i would gain by removing the line entire. i would most likely have a completely transparent bg that shows the sky background perfectly. but that isn't what i want. i'm sorry if i diddn't understand your purpose for it. i don't mean to question you. >.< could you perhaps clarify how removing the background png would help?

cause that png file is the one i'm trying to make work with the script.

10-12-2007, 08:46 AM
Sorry about being late getting back to you. Life stuff.

I thought maybe the solid coloured background was affecting the transpaency/opacity of the images.

Did you try my suggestion? And did it work?