Results 1 to 4 of 4

Thread: How to make an IFrame transparent?

  1. #1
    Join Date
    Jan 2009
    Posts
    134

    How to make an IFrame transparent?

    Hi everybody,

    I have a built an web site where there is some information stuffs in the background that I want people to see. The problem is, I want to use an IFrame for the content. This IFrame will appear in front of what I want people to see. How can I get the IFrame to be, "transparent," so people can see whats behind it, but also see the text??? I know it's complicated.

  2. #2
    Join Date
    Jan 2009
    Posts
    125

    Re: How to make an IFrame transparent?

    I am not sure that it is possible (i may be wrong) but as far as i know iframes load a separate webpage, your best bet is to set the background color/image in the Inline Frame. Measure out how much of your background image with the I frame is covering cut it out of the pic you are using as the background and make a new image by puting it centered into the background of the page that loads in the Iframe. if you are just using a color........ change the color of the background for the page you are loading in the Iframe.

  3. #3
    Join Date
    Mar 2008
    Posts
    232

    Re: How to make an IFrame transparent?

    The correct way to make an iFrame transparent is to set a special attribute for the iFrame element then making the second document’s body transparent using CSS. The iFrame attribute is allowtransparency. If it’s set to be true, the iFrame will be transparent, else will be a static color, white by default.

    Let’s see an example. First, we have to make the document we want to mirror transparent. This can be achieved with CSS, by putting the following code in the head section of the document:

    Code:
    <style type="text/css" media="all">
    body {
    background-color: transparent;
    }
    <style>
    Now in the document you want the iFrame to appear, create an iFrame and make sure the allowtransparency=”true” attribute is set. Like this:

    Code:
    <iframe src="seconddocument.html" allowtransparency="true" >
    </iframe>

  4. #4
    Join Date
    Jan 2006
    Posts
    211

    Re: How to make an IFrame transparent?

    To make a frame transparent, you have to:

    Add

    ALLOWTRANSPARENCY="true" to the IFRAME element tag.

    Add
    STYLE="background-color:transparent" to the BODY tag of <fileName> that is being sourced in the IFRAME tag (SRC=<fileName>).

    Here is the code to implement the example above:

    Code:
    <IFRAME NAME="Frame1" SRC="010209d.html" 
    ALLOWTRANSPARENCY="true" STYLE="position:absolute; top:20; left:50; z-index:3">
    And the BODY tag of 010209d.html is:

    <BODY STYLE="background-color:transparent">

Similar Threads

  1. How To Make Image Transparent in GIMP?
    By Landry in forum Customize Desktop
    Replies: 6
    Last Post: 22-08-2011, 01:20 PM
  2. How to make bmp image transparent
    By SMG in forum Windows Software
    Replies: 7
    Last Post: 27-08-2010, 05:17 PM
  3. How to make Windows XP taskbar Transparent ?
    By Demi in forum Customize Desktop
    Replies: 3
    Last Post: 25-06-2009, 11:30 PM
  4. How to make a transparent form in VB 6.0
    By CheckMeNot in forum Software Development
    Replies: 2
    Last Post: 24-12-2008, 02:27 PM
  5. How to make transparent buttons in C#
    By AmdUser in forum Software Development
    Replies: 5
    Last Post: 01-12-2008, 01:08 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Page generated in 1,751,771,637.14489 seconds with 16 queries