Skip to content
Related Articles

Related Articles

How to create a transparent iframe ?
  • Last Updated : 14 Jul, 2020

The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page.

Syntax:




<iframe src = "URL"></iframe>

A transparent iframe can be made by setting its background to transparent.

body {
    background-color : transparent;
}

And, the allowtransparency attribute of “iframe” is to be set as “true”.




<iframe src = "URL" allowtransparency = "true"></iframe>

Example:

  • HTML code:




    <!DOCTYPE html>
    <html>
      
    <body>
        <div style="background: green; 
                padding: 30px;">
                  
            <iframe src="iframe.html" 
                allowtransparency="true">
                Alternate content
            </iframe>
        </div>
    </body>
      
    </html>
  • iframe.html




    <!DOCTYPE html>
    <html>
      
    <body style=
        "background-color: transparent; 
        text-align: center; 
        color: #ffffff;">
          
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
    </body>
      
    </html>

    Output:
    output




    My Personal Notes arrow_drop_up
Recommended Articles
Page :