Posted By: Anonymous
How can I control the background image and colour of a body element within an
iframe? Note, the embedded body element has a class, and the
iframe is of a page that is part of my site.
The reason I need this is that my site has a black background assigned to the body, and then a white background assigned to divs that contain text. A WYSIWYG editor uses an
iframe to embed content when editing, but it doesn’t include the div, so the text is very hard to read.
The body of the
iframe when in the editor has a class that isn’t used anywhere else, so I’m assuming this was put there so problems like this could be solved. However, when I apply styles to
class.body they don’t override the styles applied to body. The weird thing is that the styles do appear in Firebug, so I’ve no idea what’s going on!
An iframe is a ‘hole’ in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.
As others have stated, your options are:
- give the file that is being loaded in the iframe the necessary CSS
- if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.