I use iframes on a lot of my layouts, so I decided to write a tutorial on them. This tutorial won't be too complicated, but I hope you get the idea on how to create them. This tutorial covers both iframes for transparent scrollbars and regular iframes.

First you need to create a layout in a graphics program (ie Paint Shop Pro or something similar). Then you need to cut and code your layout (either using div layers or tables), and then put your iframe code in the layout.

For a transparent scrollbar in a table, you need to put your background image in both the <td> and your actual frame page's css. In a transparent scrollbar's iframe code, you use chroma colors. In your iframe code you put a color, this color should be the same as the parts of your scrollbar you want transparent in your css. Make sure to use a color that is not used in any of your other codes. Otherwise, your text might become transparent as well.

It should be noted that transparent iframes only works in Internet Explorer. Here's the transparent iframe code:

<iframe name="iframe_name" src="link.html" frameborder="0" width="100" height="100" style="border: 0" marginwidth="0" marginheight="0" scrolling="auto" allowtransparency="true" style="filter:chroma(color=#FFFFFF)"></iframe>

Here I will cover tables and layers for transparent iframes, let's begin.


When making a transparent iframe layout with tables, you must put your background in your td tag and your frames code. Like so:

<table width="100" border="0" cellspacing="0" cellpadding="0">
<td background="bg.jpg"><iframe name="iframe_name" src="iframe.html" frameborder="0" width="100" height="100" style="border: 0" marginwidth="0" marginheight="0" scrolling="auto" allowtransparency="true" style="filter:chroma(color=#FFFFFF)"></iframe></td>

Now, in the page that is named in the iframe code (iframe.html), add this to your css code:

body { background-attachment: fixed; background-image: url(bg.jpg)}

^ This will keep the background in place in all browsers.


When using a layer, you need to have the background in a layer behind your layer that has your iframe code. In the actual page that is in the iframe code (let's use iframe.html like in the tables example), you need to add this to your body tag:

style="background-color: transparent"

^ That should also work in both IE and Mozilla Firefox (scrollbar transparency does't work in Firefox, but the layout will still look fine and function).

Regular Iframes

<iframe name="iframe_name" src=link.html" frameborder="0" width="100" height="100" style="border: 0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>

Well, that's about it. Hopefully it's not difficult. Remember when using iframes (or frames in general), to target your links. You can find out how to do that in my Basic Tags and Codes tutorial.
 • Main/Updates
 • Domain
 • Current Layout
 • Past Layouts
 • Contact
 • Links
 • Credits
 • Terms of Usage
 • Layout Guide
 • Layouts
 • Avatars
 • Abstract Art
 • Tutorials
 • PNG's
Kamui [Tsubasa Reservoir Chronicle] Subaru [X] Yuuko [XXXHOLiC]
Survey and System Designing Plan - urban design in the planning System 24/7 operation.
2003 - 2012 Amber-Nights.net