How To Make A Non-Transparent Iframe Look Transparent

Many young or beginning webdesigners favor transparent iframes because of its seamless integration onto a graphic background. I can count myself among those webdesigners even now--I do like the way a transparent iframe looks on the page. But I don't use them much anymore, because there is a slight problem with them.

What is that problem, you ask? Well, unfortunately, lots of users have browsers that don't "understand" transparency. For them, a transparent iframe becomes unreadable text against a vision-impairing neon green background, or simply a "There is an error on this page" screen instead. These users will be frustrated with your page if you have a transparent iframe on them--and they won't come back if they are frustrated with your design.

Well, how do you get around this dilemma? You like the look of transparent iframes, but you can't use them. But not to worry---I figured out a way to get the look of a transparent iframe, but in such a way that even browsers with limited capacities for transparency will be able to understand.

Before you go further in the tutorial, you will need to determine whether you need an iframe that has a simple background color to blend in with your page's background color, or whether you will need an iframe that looks like it is floating on top of your page's background graphic.

Non-Transparent Iframe with Background Color Only | Non-Transparent Iframe on Top of Image

Non-Transparent Iframe with Background Color Only

Open a new Notepad/Simpletext file, or your most basic text editor. Nothing like Microsoft Word or Works--those applications don't care for HTML code, for some reason.

Now, copy and paste the following code into your text file:

<iframe src="NAME_OF_PAGE_THAT_SHOULD_DISPLAY_IN_IFRAME.htm" frameborder="0" height="250" width="350" name="whatever you want"></iframe>

This is the basic iframe coding, but notice that it is missing the style="filter: chroma(#000000)" stuff that usually makes iframes transparent.

A brief explanation of each of the things in the iframe coding:

• The iframe src="NAME_OF_PAGE_THAT_SHOULD_DISPLAY_IN_IFRAME.htm" stuff is where you specify which of your site's pages should display in the iframe when a user first loads your page. Usually this would be a very simple welcome page. Don't put the name of your index/home page (where your iframe is most likely going to be placed)!
• The frameborder attribute determines whether your iframe will have a silvery-white border around it. A value of frameborder="0" means no border; a value of frameborder="1" means there will be a border. This is up to personal discretion--sometimes a bordered iframe looks nice in a layout, and sometimes...well, it doesn't. XD
• The height and width of the iframe should be tailored to your layout. See what looks best on your own main page---experiment and have fun! Oh, and by the way, the measurements are in pixels, not centimeters or inches (thank goodness).
• The name="whatever you want" attribute is what you call the iframe. This will need to be specified, because you want all your pages on your site to open in your iframe, right? The way to do it is through naming the iframe, and then making sure to target each of the navigational links of your site so that when a user clicks on the links, the pages open in the iframe. So, if your iframe was called "frame," each of your navigational links would need target="frame" in their code.

Now, for the next step, you will either need to incorporate your body background color into each iframe page's HTML, or you will have to make an external CSS stylesheet for your iframe pages. I would highly recommend the latter, to save your poor abused eyeballs from having to recode ALL of the CSS every time you want to change a teeny little something. If you don't know how to make an external stylesheet, click here to go to my external stylesheet tutorial.

Save the iframe coding stuff as whatever you wish to, whether you're already making an HTML page with the iframe code on it or whether you're just saving the code in a text file for later use.

If you have learned or already know how to make an external stylesheet, open a new document in the same program you've been using (Notepad/Simpletext/etc.), and copy-paste the following code into it:

body {background-color: #CODE OF COLOR HERE;}

Doesn't look like much, does it? Well, this will enable you to have a background color for your iframe without having to put this info on every page. All you'll need to do is link to this external stylesheet in every one of the pages that you want to display within the iframe.

The #CODE OF COLOR HERE; stuff in the CSS I showed you earlier is a placeholder for the hexadecimal color code that you want to display as the background color.

For example, if I wanted my background color for a page to be black, I would write this in my CSS stylesheet:

body {background-color: #000000;}

A good resource for these six-digit codes is WebMonkey.Com--it has a "Color Cheatsheet" where you can look up codes for whatever colors you want your site to have.

However, if you aren't going with a CSS stylesheet, you will need to change a little something in the <body> tag of each page that will be displayed in the iframe. Here is the code you'll need to replace your <body> tag with:

<body style="background-color: #;">

You'll notice that the style part of the tag still looks very similar to the CSS; this is because you are incorporating just a smidge of CSS by using this tag. The browser will still understand it in this format. Again, the #; stuff is where you'll need to put your color code that I discussed earlier in this tutorial. This particular way of implementing the background color is clunky and will be hard to change when you want to change layouts, so I would suggest using an external stylesheet; however, if your site is very small and you don't want to fiddle with CSS, this is probably a better fit for you.

After this, you will need to fiddle around in your index/home page to position your iframe correctly on the page. The following code, implemented in your index/home page between the <head> and </head> tags, will help you position your iframe on the page; however, you will probably need to change the numbers a lot before you get it aligned properly.
<style type="text/css">
iframe {position: absolute; top: 0px; left: 0px;}
</style>

Be patient with yourself during this step--it will take a while to get your iframe positioned exactly the way you want it, but just keep changing the numbers, saving your HTML document, and refreshing the page in your Internet browser of choice until it looks right!

Non-Transparent Iframe on Top of Image

Open a new Notepad/Simpletext file, or your most basic text editor. Nothing like Microsoft Word or Works--those applications don't care for HTML code, for some reason.

Now, copy and paste the following code into your text file:

<iframe src="NAME_OF_PAGE_THAT_SHOULD_DISPLAY_IN_IFRAME.htm" frameborder="0" height="250" width="350" name="whatever you want"></iframe>

This is the basic iframe coding, but notice that it is missing the style="filter: chroma(#000000)" stuff that usually makes iframes transparent.

A brief explanation of each of the things in the iframe coding:

• The iframe src="NAME_OF_PAGE_THAT_SHOULD_DISPLAY_IN_IFRAME.htm" stuff is where you specify which of your site's pages should display in the iframe when a user first loads your page. Usually this would be a very simple welcome page. Don't put the name of your index/home page (where your iframe is most likely going to be placed)!
• The frameborder attribute determines whether your iframe will have a silvery-white border around it. A value of frameborder="0" means no border; a value of frameborder="1" means there will be a border. This is up to personal discretion--sometimes a bordered iframe looks nice in a layout, and sometimes...well, it doesn't. XD
• The height and width of the iframe should be tailored to your layout. See what looks best on your own main page---experiment and have fun! Oh, and by the way, the measurements are in pixels, not centimeters or inches (thank goodness).
• The name="whatever you want" attribute is what you call the iframe. This will need to be specified, because you want all your pages on your site to open in your iframe, right? The way to do it is through naming the iframe, and then making sure to target each of the navigational links of your site so that when a user clicks on the links, the pages open in the iframe. So, if your iframe was called "frame," each of your navigational links would need target="frame" in their code.

For the next step, you will need to open your image-editing software (Microsoft Paint will not work for this job, unfortunately), and get the precise pixel measurements of the space where you want your iframe to float on top of your background image. Usually, I denote my iframe space with a little border of some sort on the image, but you can also have the iframe blend into your background graphic as well.

To get the measurements of how wide and tall you want the iframe to be, you'll need to use the marquee/selection tool (it's a little crosshairs-looking thing that you click and drag on the image to select part of the image). Select the area of the image that you would like to place your iframe, and then crop the rest of the image away (this is only temporary--don't save it yet!). Check the dimensions of the newly-cropped image, and write down the width and height of the new image so you can plug these numbers into the iframe code a little later.

Now, go to "Save As..." in the program and save the newly-cropped image under a different name, so you don't lose your original background image. I usually name my cropped image "bg" or "background" or something.

If you are making an external stylesheet for your iframe pages, you will need to copy and paste this code into your stylesheet in the section of rules dedicated to the body:
body {background-image: url('IMAGE_YOU_JUST_CREATED.jpg');
background-position: 0px, 0px;
background-attachment: fixed;}
If you do not know how to make an external stylesheet, check out my external stylesheet tutorial here.

If you are not making an external stylesheet, you will need to change the <body> tag a little in every page that you want to display in the iframe:
<body style="background-image: url('IMAGE_YOU_JUST_CREATED.jpg'); background-position: 0px, 0px; background-attachment: fixed;">

This code looks the same as the code for the external stylesheet because you basically have to incorporate a little CSS into the HTML page for the background image to render correctly.

After this, you will need to fiddle around in your index/home page to position your iframe correctly on the page. The following code, implemented in your index/home page between the <head> and </head> tags, will help you position your iframe on the page; however, you will probably need to change the numbers a lot before you get it aligned properly.
<style type="text/css">
iframe {position: absolute; top: 0px; left: 0px;}
</style>

Be patient with yourself during this step--it will take a while to get your iframe positioned exactly the way you want it, but just keep changing the numbers, saving your HTML document, and refreshing the page in your Internet browser of choice until it looks right!