View Full Version : iframe transparency problem? impared backgrounds of pictures?
09-30-2007, 08:39 AM
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..
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, 10: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)
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 + ";"
+ "(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:
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.
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.
10-02-2007, 01: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.
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, 09: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...
that's good enough for me. i will try that out immediately.
ty. i'll post back with results. :)
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, 05: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.
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, 07: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?