Before you can do transparent iframes, you must already know how to do regular iframes. If you don’t know how, read our Iframe Layout Tutorial

To start off, you want to use this code for each iframe on your page. Of course, you will need to change what’s in caps.

<iframe allowtransparency=”true” frameborder=”0″ border=0 width=WIDTH height=HEIGHT src=”PAGE.html” name=”PAGE” style=”position:absolute; left:LEFT; top:TOP” scrolling=no style=”filter:alpha(opacity=100); filter:chroma(color=6B761E)”> </iframe>

Now to make what you want transparent on your pages, you must put that color #6B761E in for the color of the parts you want to make transparent in your css codes or style sheet.

The only thing is that this will only work for the pages that show up inside of your iframes. If you have windows that open in a new window, you need to do a separate style sheet.

Share This Tutorial:

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb Netvouz

Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere Sphinn

Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed or Email Feed.

Powered by Bookmarkify™

More »

Credits to Friendstertalk.com for the CSS and JS codes.

« Iframe Layout Tutorial

Transparent Scrollbars »