View Full Version : Inline frame on top of an image

05-15-2010, 12:40 AM
Hey, so what I'm trying to do it to get an inline frame to be overlaying the image here: http://cnewton.net , and sort of filling in the middle part of it, and I can't for the life of me figure out how to. Any help would be greatly appreciated!


05-15-2010, 11:24 AM
There are several ways to achieve that outcome.

Most of them involve "don't try". By that I mean use a different approach to achieve the same result.

One of the most flexible approaches would be to cut your image into five pieces.

1. The header / menu bar
2. The left border (as a 1 px horizontal strip to be repeated vertically)
3. The central section (as a 1px vertial strip to be repeated horizontally)
4. The right border (as a 1px hz strip, same as 2)
5. The footer

Then use an img and map as now for your header / menu bar
Use divs and CSS to set the background for the other parts of your image
With 2 and 4 repeat in the y direction
With 3 set a background colour that matches the colour at the bottom of the gradient and repeat in the x direction - this will allow you to have a page of any length - for very long pages the image will fade into the background
With the footer set up the size of the div to match the size of the image.

Having placed the image in the background you can place anything on top of it, including an iframe. However HTML4.01 Strict does not allow iframes, so you should either forego using iframes or revert to HTML4.01 Transitional (or start using HTML5 which does/likely will allow iframes).

A less flexible alternative would be to use an absolutely positioned div as in the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<base href="http://cnewton.net/">
<style type="text/css">
div#page {
width: 800px;
height: 1000px;
margin: 0 auto;
position: relative;
div#background {
z-index: 1;
div#content {
z-index: 99;
position: absolute;
top: 170px;
left: 50px;
iframe {
border: 0 solid;

<script src="ga.js" type="text/javascript"></script>
<script src="ga.js" type="text/javascript"></script>
<div id="page">
<div id="background">
<img style="border: 0px solid ; width: 800px; height: 1000px;" alt="CNewton" src="Headbar%20copy%20copy.png" usemap="#Header"> <map name="Header">
<area shape="rect" coords="70,100,140,143" href="blog.html" alt="blog">
<area shape="rect" coords="177,100,267,143" href="about.html" alt="about">
<area shape="rect" coords="305,100,403,143" href="contact.html" alt="contact">
<area shape="rect" coords="437,100,545,143" href="services.html" alt="services">
<area shape="rect" coords="582,100,699,143" href="galleries.html" alt="galleries">
</div><!-- end background -->
<div id="content">

<iframe src="blog.html" width="700" height="800" ></iframe>

</div><!-- end content -->
</div><!-- end page -->
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16397437-1']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);