Results 1 to 3 of 3

Thread: Using a half transparent BG on an iFrame in IE

  1. #1
    Join Date
    Jun 2009
    Location
    United States
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Using a half transparent BG on an iFrame in IE

    Hello,

    I have a website that uses 2 iFrames to display content though the index page. The background in the html documents displayed through the iframes is a PNG image that is black, but 50% transparent. The problem I'm having, naturally, is that it doesn't work properly in any version of IE.

    The iframes are in a table that has two columns and two rows, the top row is dedicated to the navigation, and in IE 7 the 50% transparent bg works fine there! But in the two iframes the BG becomes an opaque gray. Even when I take out the BG on the HTML doc completely and put it into the table instead, it shows up the same.

    I found a few different forms of code that made it completely transparent in IE, but I couldn't figure out how to make the half transparent PNG as the background again.

    I'm not really worried about compatibility with Opera or Silverlight because those browsers aren't really that common. All I want to do right now is to make it compatible in IE and Firefox.

    Any help is much appreciated.
    -Raven

    My current iframe code:
    Code:
    <iframe src="start.htm" name=view id=view width=490 height=453 FRAMEBORDER=0 Allowtransparency=true border=0></iframe>
    Body code for each HTML document shown inside the iframe:
    Code:
    <body background="Images/half_transparent_BG.png" text="#FFFFFF">

  2. #2
    Join Date
    Jun 2009
    Location
    Laputa
    Posts
    43
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Ditch the background image, and instead use
    Code:
    background:rgba(0,0,0,0.5);
    That works on FF3+ and Webkit2+

    IE is harder, but still possible. This fix works on IE 4 and up. Put it in a seperate IE-only stylesheet so you don't have to weed it out later.

    #iframe1 { filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png');
    }

    for more information, go to http://www.howtocreate.co.uk/alpha.html or http://www.daveparslow.com/2007/08/p...arency-in.html

    Hope that helps (please thank me if it does.)

  3. #3
    Join Date
    Jun 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    http://www.twinhelix.com/css/iepngfix/

    know this, use this, love this.

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
  •