Menu
What I'm trying to achieve is an iframe positioned over another iframe containing a PDF document - the first iframe should be transparent, and it should cover the iframe with PDF. I need this specifically for IE (9+).
The code I've tried so far:
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
iframeContent.html:
<html>
<style type="text/css">
</style>
<body style="background: transparent">
</body>
</html>
However, the above doesn't work - the iframe is not transparent. Does anyone know how to solve this? As I said in the comments below, the solution posted below doesn't work with Adobe reader DC installed (if it works at all).
565
A transparent iframe can be made by setting its background to transparent. And, the allowtransparency attribute of “iframe” is to be set as “true”.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
Definition and UsageThe <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Tip: Use CSS to style the <iframe> (see example below). Tip: It is a good practice to always include a title attribute for the <iframe> .
Try this code:
HTML 1
<!--Code for transparent iframe-->
<html>
<body style="background: none transparent">
<div> I am a crappy container on top of this boring PDF</div>
</body>
</html>
HTML 2
<!--Code for both iframes.
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="SO1.html" frameborder="0" style="width: 100%; height: 300px; position: fixed; left:0px; top: 0px;" allowtransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
This positions the transparent iframe correctly on top of the PDF. Also, you had a syntax error for the attribute allowTransparency, it shouldn't have a capital T.
104
May be this will helps you
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:none transparent;" allowtransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
iframecontent.html
<html>
<style type="text/css">
</style>
<body style="background:none transparent;">
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
