Solved

How can i dispay and image above another image in a html page ?

Posted on 2009-07-05
5
219 Views
Last Modified: 2012-08-13
Hello as you could see in this page
http://keyboards-midi.musiciansfriend.com/product/Nord-Electro-2-Package?sku=500540#new

the image on this link "We will beat any price..." is shown above and mixed with the normal product image so how can i do what in java script or css ?

Thanks.
0
Comment
Question by:Styleminds
  • 2
  • 2
5 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24781540
Put them in divs and control their position with the style definition, z-index controls which goes on top


<div style="position: absolute;top:0px;left:0px;z-index:1">
  <img src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif">
</div>

<div style="position: absolute;top:0px;left:100px;z-index:0">
  <img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg">
</div>
0
 
LVL 4

Expert Comment

by:stevepicks
ID: 24781548
in css he has position absolute so he can place the price image everywhere:
#ribbon  { position:absolute; width:150px; height:150px; z-index:1; }
/*end page styles */
.usedItemBox {
margin-bottom:10px;
}
in html he uses the div ribbon with the image of the price
<div id="ribbon">
<img alt="We Will Beat Any Price - Guaranteed!" src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif" />
</div>
pretty basic css
also look here:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
0
 

Author Comment

by:Styleminds
ID: 24781577
Still didn't get the figure ! what i need is the easiest way to get two image one on the top of the other in addition i need to control the display on the top image i need to place a little up-left of the background image.
0
 
LVL 4

Expert Comment

by:stevepicks
ID: 24781605
try this inside the body of  any html:
<table><tr><td>
<div id="ribbon" style="position:absolute; width:150px; height:150px; z-index:1;">
<img alt="We Will Beat Any Price - Guaranteed!" src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif" />
</div>
<img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg"
</td></tr></table>
0
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
ID: 24781735
"Still didn't get the figure ! what i need is the easiest way to get two image one on the top of the other in addition i need to control the display on the top image i need to place a little up-left of the background image."

I think my response demonstrates that? Or am I misunderstanding your question?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add shadow behind div 5 25
function parameter and using that as array 15 23
asp Google Map 2 27
Hiding Adsense on Mobile Devices 2 28
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question