How to set a transparent background on an iframe
No matter what I do I keep ending up with a white background on this iframe. I have tried removing all the elements from it and setting
background: transparent on the <html> tag. and the <iframe> itself. I tried allowTransparency but react 18 says it does not recognize this property. At this point all the google links are purple. Has anyone done this before?48 Replies
what is the iframe? link?
sorry. didnt get the notification
its in my local development env
i can replicate it with an empty iframe that has
background-color: transparent
im trying to play around with it in the dev console and nothing is making it tranparent
are there any other styles applied to it from another stylesheet or anything?
i dont think so. and even if there were wouldnt
element.style override it?
im not sure of everything thats in the tailwind reset
i could check therenot necessarily (inline styles can be overridden by
!important, for example)
you can view computed styles in your dev toolsyeah theres nothing on any of them
i checked there
oh but this is interesting
just double checked
the computed body style isnt getting the transparent color
if you just do something like
background: red does it pick that up?red on the iframe does nothing....
put it on the body and give the body a size maybe
but if it's not picking up any inline styles then I'm not sure what's going on... just playing with this in a codepen I can make the background of the iframe transparent but idk if that's transferable haven't worked too much with iframes tbh
body fills the html. setting red on the html works
link?
I know they usually supply their own styles because you can't reach across the iframe boundary from the parent document or w/e
but these are just inline styles within the iframe
I closed out the codepen, but it was as simple as it gets
you can see it taking up the expected dimensions with and without the background
but it's hard to test an actual iframe thing out in codepen where there's a proper src
well right now im just doing it with an empty iframe with no src
so it autofills with an empty html, head, and bosy