Transparent Inline Frame

Inline frames (there is a tutorial in the html section) require a background for the framed section. Or do they? This tutorial shows you how to "cheat" and not have to cut the background image.

You put the allow transparency code in your iframes tag. It looks like this: allowtransparency="true" It goes in the iframes tag:

<iframe FRAMEBORDER="0" BORDER=0 width=###px height=###px src="INLINE FRAME NAME.html" name="NAME OF TARGET" style="position:absolute; left:###px; top:###px" scrolling=auto></iframe>

The complete end result is:

<iframe FRAMEBORDER="0" BORDER=0 width=###px height=###px src="INLINE FRAME NAME.html" name="NAME OF TARGET" style="position:absolute; left:###px; top:###px" scrolling=auto allowtransparency="true"></iframe>

Now, to change your CSS code.

You insert a line of css into the BODY part of your css

BODY { color:#FONTCOLOR; font-size:12px; font-family:verdana; background-color: #COLOR; background-image: url(BACKGROUND.NAME); background-attachment : fixed; line-height: 15px; }

Instead of
background-color: COLOR;
background-image: url(BACKGROUND.NAME);
background-attachment : fixed;

We have something else:
background: transparent;

Now the background should be totally transparent! That means if you just view the .html file not through the iframe, the bg will be white (since that is the default of the browser page). When you view it through an iframe (which is layered over your layout image) the background will be transparent and will show the image below it. Very nifty!

<-back