JQuery removed background from iframe

Question

I'm trying to remove the background image on a page that's being loaded via an iframe within a lightbox effect. I have verified that body is the correct element within the iframe that's being selected, but I can't get the background image to go away. Am I missing something obvious?

var body = jQuery('#fancybox-frame').contents().find('body');

body.css({
 'background': 'none',
 'background-image': 'none',
 'background-color': '#fff'
});

UPDATE: Currently my CSS for this element reads (according to firebug) ...

body {
   background-color:#5A7E92;
   background-image:url("/images/background.gif");
   border:10px solid #021E2F;
   font-family:verdana,san-serif;
   font-size:10pt;
   margin:auto;
}

UPDATE: You can see the example here by clicking the "Mail" link.... http://www.retailcustomerexperience.com/article/21532/GlobalShop-DOOH-measurement-essential-for-reaching-customers

Answer 1

The background is probably on some other element.

Inspect the page in the <iframe> in Firebug and check which element has a background.

Answer 2

I think if you let the values be empty it won't actually do what you're expecting. Try setting background to 'inherit' and see what it does.

Answer 3

Try changing background-image to none. That is a valid value for that css property, and I believe that will explicitly remove your background image.

Answer 4

This might not be the complete answer, but this may help you find the answer.

<iframe frameborder="0" style="width:756px;height:439px;background-image:none;background-color:transparent" src="http://janemonheitonline.com/photos?KeepThis=true&amp;amp;" hspace="0" allowtransparency="true"> </iframe>

The "allowtransparency" is required for Internet Explorer to remove the background image and background color on the iframe. Try this code so see if the background image is on the iframe rather than the body.

You can see how the code works at http://janemonheitonline.com by clicking on any of the main navigation links.