Use the ::before generated content selector on an iframe element
css, iframe
Solution
I'm not certain on this, but I'm thinking this won't display unless the user's browser doesn't support iFrames.
If you take a look at this answer, it suggests that the :before and :after pseudoelements are placed inside the parent element, which in this case is the iFrame.
Now we head over to the docs and can infer the behavior of iFrame children from this code:
<iframe src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
Which is to say, they only display when the `src` of the iFrame isn't displayed. Again, this is just inference, but it seems like a plausible explanation.
Problem
``` <!DOCTYPE html> <html> <head> <style type="text/css"> #test iframe { border: none; background: #333; width: 500px; height: 500px; overflow: hidden; } #test iframe:before { display: block; content: " test"; width: 500px; height: 500px; background: url('overlay.png') no-repeat; position: relative; top: 0px; left: 0px; z-index: 999; } </style> </head> <body> <div id="test"> <p><iframe></iframe></p> </div> </body> </html> ``` I'm trying to place an image over an `iframe` but for some reason the `::before` selector isn't getting along with the `iframe` — try replacing the `iframe` with any other element and it works. I need the `iframe` to be a child of the p element.