473,700 Members | 2,510 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How do I Superimpose 2 images ?

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=is o-8859-1">
<title>Demo Page 1</title>
</head>
<body lang="EN-GB" style="backgrou nd url(images/background.gif)
no-repeat;">
<div id="PgTop">
<div id="imgForegrou nd" 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">Follow ed 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="TableOfCo ntents"></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=is o-8859-1">
<title>Demo Page 2</title>
</head>
<body lang="EN-GB">
<div id="PgTop">
<div id="imgBackgrou nd" style="position : relative; top: 0px; left:
0px; z-index:1">
<img src="images/background.gif" height="948"
width="735"></div>
<div id="imgForegrou nd" 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">Follow ed 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="TableOfCo ntents"></a>
<h2>Table Of Contents</h2>
</html>
</body>
Jul 24 '05 #1
2 11004
Previously in comp.infosystem s.www.authoring.html, Harry Haller
<Ha***@Steppenw olf.com> said:
I am trying to display one image on top of another. <snip> How can I get this to work?


Set one as a background image of a div, and insert the other as an
actual image inside the div.

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 24 '05 #2
On Tue, 19 Jul 2005 08:47:21 +1000, Mark Parnell
<we*******@clar kecomputers.com .au> wrote:
Previously in comp.infosystem s.www.authoring.html, Harry Haller
<Ha***@Steppen wolf.com> said:
I am trying to display one image on top of another.

<snip>
How can I get this to work?


Set one as a background image of a div, and insert the other as an
actual image inside the div.


Thank you Mark,

I recognised my error - a missing colon in the style attribute of the
body tag.

Jul 24 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
2360
by: Wayne | last post by:
I have a script that uses filesystemobject that reads files from a given path, in my case images. It is running on a server that is 2000 adv svr w/ all current patches. The script prior to some patch updating worked fine and showed the pictures. Now the pictures no longer show when looking at the source code the absolute path of the file is correct but will not display the image. I tried it on another 2000 adv svr and the script worked...
11
7518
by: Penelope Baker | last post by:
Greetings: I cannot seem to get IE 6.0 to pre-cache my rollover images. Every time the user rolls over a link, it rereads it from the server, even though it is well into the cache by that time. It works fine in Netscape, Mozilla, Firebird, Firefox, etc. Suggestions? (Other than the obvious one regarding IE :P) Thanks!
2
1896
by: Julie | last post by:
Hi, I'm trying to change images on a website without reloading the whole page and use the following code to preload the images: var preloadFlag = false; function preloadImages() { if (document.images) { pic_moon2_click = newImage("images/moonpic2.jpg"); pic_moon3_click = newImage("images/moonpic3.jpg");
3
3825
by: Simon | last post by:
This problem has been driving me mad for months.... Seen a few posts on forums about it but no answers... No mention on MSDN etc. XP Pro SP1, VS.NET (c#) .Net framework 1.1, IIS 5.1. In a nutshell when testing my ASP.NET (localhost) apps images randomly don't load on the page. Examining the IIS logfile shows the missing images give 401 or 403 errors. Here's an example - 10:15:47 127.0.0.1 GET...
4
2502
by: Bernie Raffe | last post by:
When I change the 'cookieless' flag in the WebConfig file to true, everything works fine on my local PC, but the images fail to appear when using the remote server. I specify my images throughout using a relative directory structure, such as 'images/topbanner.jpg'. I tried changing this to ~/images/topbanner.jpg and .../images/topbanner.jpg, but this didn't work locally so I didn't even bother trying it out remotely. Tthe problem...
2
1904
by: Alex | last post by:
I have a web application hosted on the server's F:\www directory. I have images stored on the file system at E:\Images. I have the website shared thru IIS pointing to the F:\www directory. 1.) Should I create a virtual directory to share out the images on E:\Images? 2.) Should I just link to my images on E:\Images from my webapp using a web.config defined setting of <add key="images" value="E:\Images"/> ? The problem is, when I do step...
4
2967
toxicpaint
by: toxicpaint | last post by:
Hi, can anyone give me a hand. I'm currently displaying 4 random images at the top of a page. I did this using an array of 35 pictures and then writing them to page. The problem I have is that in theory you could get the same image 4 times. I quite often get 2 of the same picture come up. What's the easiest way of saying "once an image is assigned to a variable, take it out of the array"? Here's my code so far.. images = new Array(34);...
5
4107
by: remon87 | last post by:
I need some help. I have javasript that creates the submenu but it works if I have a text with css. I need it to do the same with a roll over images. so when I click on the image the submenu (images) shows with roll overs as well. That's what I have... <script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; }
0
8647
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9076
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8926
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6563
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5903
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4659
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3092
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2392
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2030
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.