Link to home
Start Free TrialLog in
Avatar of Badotz
BadotzFlag for United States of America

asked on

IFRAME background-image OK in FF, Opera, but not IE7

Friends,

Can someone please save what's left of my hair and tell me why the snippet below works in FF 3.0.1, Opera 9.51 but not in IE 7.0.5730.13?

Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
iframe#viewport
{
background-color: Transparent;
background-image: url(http://localhost/ov-en/image/Peeka-Boo.png); 
background-repeat: no-repeat; 
height: 300px; 
width: 400px;
}
</style>
<script type="text/javascript">
window.onload = function() { document.title = '<iframe> Background Image Test'; }
</script>
</head>
<body>
<div id="heading">
<h1>mousey-mick.com</h1>
<h2>"The most malevolent rodent on earth!"</h2>
</div>
<div id="content">
<iframe id="viewport" frameborder="1"></iframe>
</div>
</body>
</html>

Open in new window

Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image

Can you remove the  from the title assignment? Just use iframe.

And then you could just put it into <title>iframe Background Image Test</title>

Can you provide an online version? (On a laptop with no web server and too darn lazy to install one!).
What a great tip! Nice one MSK!
Avatar of Badotz

ASKER

Trust me, it doesn't matter.

I'm working on putting it online, but can't just yet.

But here is something interesting:

On the initial page load, there is no background image, and the SRC of the >iframe< is not set. When I set the SRC of the >iframe<, suddenly there is the background image.

I will see if creating a "dummy" page for the initial load solves the problem.
Avatar of Badotz

ASKER



"name" is considered outdated...
Attributes should be quoted strings (frameborder="0")

followed by:

 

This does not address anything re: background-image, sorry. Nor does it fix my problem.
Avatar of Badotz

ASKER

I have tried "ALLOWTRANSPARENCY", "allowTransparency", "allow-transparency", all to no avail.

I made the image the background for a page and pointed the >iframe< SRC at it, but no image. It flashes briefly, then is replaced with a white background.
ASKER CERTIFIED SOLUTION
Avatar of Badotz
Badotz
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You are going about this TOTALLY the wrong way.  NONE of your code is needed, and there is no need to force an image as background from the PARENT, because that is not how it is done.

An IFRAME is a separate page within a page.  The background BELONGS to the page going into that iframe.

So ALL you do is put in the page that is going into the iframe --

BODY background="some_image.gif"

and you are done.   The parent CANNOT force what the page has as background going into an iframe.  The page in the IFRAME is its own entity, like www.google.com -- you cannot control it.

This is the CORRECT answer to your question.
see my comment
PengiunMod -- don't get so bent out of shape.  CAPITALS ARE FOR EMPHASIS OF KEY POINTS.

This idea that capitals are shouting, I think is extremely childish.  I never shout to anyone.  But in long posts I DO need to emphasize the KEY POINTS.  Try and get off the "shouting" mantra that has evolved from who knows where, maybe frail egos, and realize, it is for emphasis only of key points.

I never said my answer was perfect, only cynicism said that.  Just trying to make the questioner see the right way to do this when iframes are involved.  So why am I having to explain all this self-evident stuff?  Because you are upset with CAPITALS?  My My, how else can a person emphasize KEY POINTS?  This EE input box is so limiting, it deletes HTML codes willy nilly, but has never allowed any way for emphasis

Try to "tough up" your persona on EE.  We get some pretty heavy flack here in the front lines, maybe join us to see you can't keep a sensitive ego here.  I am told I have to "take it", so why can't mods take it too?
Just in case you missed the answer ...

The main page tells the iframe (via attributes) that the transparency is allowed.

You load the iframe with a transparent background.

No image.

If you are expecting to load a semi-transparent image (like a alpha PNG), then this is going to partially supported.

If you intent is to load a third party site and then change the background to transparent ... you may come across a limitation of some browsers to not let you interact with a page from a different site ("same origin policy" I think this is called).


Also, once the load order becomes important.

Main page is loaded, CSS is triggered during the loading, the iframe has a transparent background for a while. That is until the iframe contents kick in.

If the iframe's content doesn't have a transparent background, then you will not get the result you want. The iframe's content is responsible for the background, not the main page.
Avatar of Badotz

ASKER

scrathcyboy: Did you even read my question? While I admire your passion, I have to wonder about your disdain.

I will rephrase my question for you:

Can you please tell me why the snippet in  http:#a23579438:

1. WORKS in FF 3.0.1
2. WORKS in Opera 9.51
3. DOES NOT WORK in IE 7.0.5730.13
__________________________________________________

RQuadling:

>>If you are expecting to load a semi-transparent image (like a alpha PNG), then this is going to partially supported.

What does "partially supported" mean? Every browser EXCEPT IE7?

>>If the iframe's content doesn't have a transparent background, then you will not get the result you want.

But I *DO* get the result I want in both Firefox and Opera.
__________________________________________________

As stated earlier, I have it working in all browsers, albeit IE7 has special code - and it's own >iframe< page. However, my original answer remains unanswered, despite the Best Efforts of all involved.
Avatar of Badotz

ASKER

>>my original answer remains unanswered, despite the Best Efforts of all involved.

I meant, of course:

my original question remains unanswered, despite the Best Efforts of all involved.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Badotz

ASKER

Right. The IFRAME is not part of the main page. I get that.

I have used them before. I use window.parent to let the IFRAME talk back to the parent.

It just seems odd that there should be such a big difference in this particular behavior between IE and everyone else. Knowing that there is, I have to treat IE differently.

(sigh) Why can't we all just, get along? (Slim Whitman music in the background...)
Avatar of Serge Fournier
> scrathcyboy:
> This idea that capitals are shouting, I think is extremely childish.  I never shout to anyone.  But in long
> posts I DO need to emphasize the KEY POINTS.  Try and get off the "shouting" mantra that has
> evolved from who knows where, maybe frail egos, and realize, it is for emphasis only of key points.

AT LEAST! 1 person in the world think like me about this idiotic shooting/caps thing!
THANK YOU !

Avatar of Badotz

ASKER

>>AT LEAST! 1 person in the world think like me about this idiotic shooting/caps thing! (sic)

Shooting caps? I had a "Fanner 50" when I was a kid, and "Greenie Stick 'em Caps" that were little round caps, about 1/4" circles - on a sheet about 6" suare. They had adhesive on the back so you could stick one on a bullet, and when you fired your gun - Bang!

The bullets were little plastic thingies with a clip mechanism that held them in place on the shell. I think there was a spring in the shell to provide propulsion.
i had success putting a background in an frame with the full path of the image (C:\fdgfds\dsgfd\dg.tif)