HTML Forum

**josil** · 08-01-2006, 05:07 AM

How can I load on a Iframe an image over a background image?

**b0881** · 08-01-2006, 05:19 AM

If you have a background image then you can just insert an image via the image tag...

<img src="image.jpg"></img>

**josil** · 08-01-2006, 07:53 AM

Quote:

Originally Posted by b0881

If you have a background image then you can just insert an image via the image tag...

<img src="image.jpg"></img>

Hi

I did, but does not work inside of a Iframe.

<td width='45%' rowspan='11' align='center'>
<IFRAME name='I2' scrolling='auto' width=350 height=350 background='miniature.php?lang=$langid=$id&image=2'><img border='0' src ='image.gif'</IFRAME>

when miniature.php has

<body oncontextmenu="return false;" topmargin="0" leftmargin="2">
<?

print ("
<p align='center'><IMG src='admin/get_miniature.php?img=$image&client=$id&max_width= 350'>");
?>
</body>

Inside of a normal cell table it works:

<tr>
<td background='admin/get_miniature.php?img=2&client=$id&max_width=76' align='center'><IMG border='0'
SRC='image.gif'></a></td>
</tr>

**b0881** · 08-01-2006, 08:07 AM

You havent set the source of the iframe.

Create a new page, put your image in there and set the page background to your background image, then enter the file name in the src of the iframe.

It should then display correctly.

**saadatshah** · 08-02-2006, 02:15 AM

Try this

1) creat a file and name it image.html

HTML Code:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<IMG border='0' SRC='image.gif' height="60" width="60"></a>
</body>
</html>

2) create another file with anyname

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" background="someImage.gif">&nbsp;
<iframe src="image.html" height="50" width="50" scrolling="no" ></iframe>
</td>
</tr>
</table>
</body>
</html>

**josil** · 08:21 AM

Quote:

Originally Posted by saadatshah

Try this

1) creat a file and name it image.html

HTML Code:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<IMG border='0' SRC='image.gif' height="60" width="60"></a>
</body>
</html>

2) create another file with anyname

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" background="someImage.gif">&nbsp;
<iframe src="image.html" height="50" width="50" scrolling="no" ></iframe>
</td>
</tr>
</table>
</body>
</html>

Ok I tried but so far withou success

Ok I replaced the original Iframe source filet called "ver_imagem.php" (portuguese for see_image) that makes to appear only the main image...

<body oncontextmenu="return false;" topmargin="0" leftmargin="2">
<?

print ("
<p align='center'><IMG src='admin/get_miniatura.php?img=$image&cliente=$id&max_width =350'>");
?>
</body>

...by the one with the same name, that you mentioned....

Now on the page called "ver_imo.php" (portuguese for see_imo) where is the IFRAME, has...

<td width='90%' align='center' height='90%'>
<p align='center'><IFRAME name='I2' scrolling='auto' width=350 height=350 SRC='ver_imagem.php?ilang=$lang&id=$id&image=2'></IFRAME>
</td>

On the same page there are 4 miniatures that I manage to have the main random image under a specific and the same image (copyright.gif) over each one that I programmed like this...

<td background='admin/get_miniatura.php?img=2&cliente=$id&max_width=100' height='75'>
<p align='center'><a href='ver_imagem.php?id=$id&image=2' target='I2'><IMG border='0' SRC='images/copyright.gif'></a></td>

...but onclick in the miniatures (miniaturas) only the copyright image appears on the IFRAME

I hope that you understaned (sorry for my bad english)

**ChipJohns** · 08-02-2006, 08:31 AM

Is there a reason you are doing this in an iframe?
can you just use a div tag?
itwould be much easier.

**josil** · 08-02-2006, 09:36 AM

Quote:

Originally Posted by ChipJohns

Is there a reason you are doing this in an iframe?
can you just use a div tag?
itwould be much easier.

Well probably but my knowladge still very poor, and I do not know how that can be done.

**ChipJohns** · 08-02-2006, 09:47 AM

here is the css to add the background image to the div

Code:

#mydiv {
    background-image: url(my-bg-image.jpg);
    background-repeat: no-repeat;
}

here is the div with the image in it...

HTML Code:

<div id="mydiv"><img src="myimage.jpgf" width="28" height="33"></div>

hope this helps..

**josil** · 08-02-2006, 10:08 AM

I already manage to have it work. Thanks to all for the tips.

Here it is thye way I did might help somebody.

<html>
<head>
<style type="text/css">

<?

print("

body {background-image: url(admin/get_miniature.php?img=$image&client=$id&max_width= 500);}");

?>
</style>
</head>
<body>
<img src="images/watermark4.gif" alt="image"/>
</body>
</html>

**saadatshah** · 08-03-2006, 06:23 AM

I guess you were keen to have an ifram to slove this anywayz Its good that you have it solved yourself.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!