Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #315228

    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 9 years, 9 months ago by Josue.


    Can you post the link to the page where you are trying this please?



    Josue, Sorry for the delay responding back to this thread! We work on local host, so there are no links when we are developing sites. Only screen captures.

    You can close this thread. It was faster to code it from scratch. It is lightning fast, lazy loaded, fed from a database, resizes thumbs and full images with GD Library, scrolls and flicks each photo and thumbnail with Jquery animations, while enlarging fullscreen views with a lightbox and captions and a few more features.


Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Transparent Iframe using underlying Enfold page as the Iframe – CSS?’ is closed to new replies.