Transparent Iframe using underlying Enfold page as the Iframe – CSS?

Two questions are highlighted below.

I am hosting a Gallery inserted from the ALB on a page without a header, footer, sidebar, or any other elements on the page. No keylines, borders, or anything else. Nada, zip, zilch. Just the Gallery. It does not have a parent Div container. Zilch. That Gallery is Fixed Positioned to the upper left corner of the browser window at coordinates left:0 top:0
It has a max-width property set to 100% so it completely fills the browser window. It works a treat and looks grand.

Now, I want to serve this gallery in an Iframe inside another page so she will scale up and down. That also works grand. But with one big caveat: The white background doesn’t match the host page holding the Iframe.

Q. What CSS properties are controlling the underlying Iframe page to appear white and how do I make that property transparent?

I am not asking you how to make a transparent Iframe. I know how to do this and have done it countless times with self-authored web pages using straightforward HTML, CSS and not using a CMS. Read my question above. It is very specific. What CSS property is controlling the page color and how do I make that underlying property transparent? If it requires !important on a CSS property, let me know that. I do not use the short code editors for anything, so this is not an attractive solution. I use a separate style.css sheet for modifications inside the child-theme folder.

Is the property HTML? .html_stretched? .responsive? This is the top level CSS tree that I see when analyzing the CSS on the page.

Traditionally, this is how you handle making a transparent underlying IFrame:
1. The BODY tag on the Iframe page needs: background-color:transparent
2. The host HTML page that holds the Iframe inside it requires ALLOWTRANSPARENCY=”true” attribute on the Iframe tag

This is not cutting the mustard and doesn’t work. Something white appears to be overlaying the BODY tag.

Q2. And finally, ideally, I would like to only have this Iframe page with background-color:transparent, leaving all other pages with the default properties. So can you include the correct syntax for
including it on .page-id-3343 ?

Thanks for any input you can offer.

• This topic was modified 10 years ago by Josue.