|
Posted by Harry Haller on July 18, 2005, 5:14 pm
Please log in for more thread options
I am trying to display one image on top of another.
The background image is: 16 Kbytes, width: 735 px, height: 958 px. It
has a single color redbrick image on a transparent background.
The foreground image is: 3 Kbytes, width: 372 px, height: 91 px. It
has a single color black image on a transparent background. It should
appear on the right hand side about 200px down superimposed on the
background image.
Neither of my 2 attempts displayed the image.
With Demo 1 only the foreground image is shown
With Demo 2 both images are shown but the foreground is displayed
below the background (not on top of it)
How can I get this to work?
= = = = = = =
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=iso-8859-1">
<title>Demo Page 1</title>
</head>
<body lang="EN-GB" style="background url(images/background.gif)
no-repeat;">
<div id="PgTop">
<div id="imgForeground" style="position: relative; top: 150px;
left: 360px; z-index:2">
<img src="images/foreground.gif" alt="Foreground" width="372"
height="91" border="0"><br>
<span style="font-size: smaller">Some text</span>
<span style="font-size: smaller">Followed by more
text</span><br>
<b style="font-size: larger">A Description of what it is</b>
<h1 style="padding-top: 100px">The Page title</h1>
</div>
</div>
<a name="TableOfContents"></a>
<h2>Table Of Contents</h2>
</html>
</body>
= = = = = = =
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=iso-8859-1">
<title>Demo Page 2</title>
</head>
<body lang="EN-GB">
<div id="PgTop">
<div id="imgBackground" style="position: relative; top: 0px; left:
0px; z-index:1">
<img src="images/background.gif" height="948"
width="735"></div>
<div id="imgForeground" style="position: relative; top: 150px;
left: 360px; z-index:2">
<img src="images/foreground.gif" alt="Foreground" width="372"
height="91" border="0"><br>
<span style="font-size: smaller">Some text</span>
<span style="font-size: smaller">Followed by more
text</span><br>
<b style="font-size: larger">A Description of what it is</b>
<h1 style="padding-top: 100px">The Page title</h1>
</div>
</div>
<a name="TableOfContents"></a>
<h2>Table Of Contents</h2>
</html>
</body>
| 
XML Sitemap