We help IT Professionals succeed at work.

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

Styleminds asked
Last Modified: 2012-08-13
Hello as you could see in this page

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 ?

Watch Question

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 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">
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 {
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" />
pretty basic css
also look here:


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.
try this inside the body of  any html:
<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" />
<img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg"
Unlock this solution and get a sample of our free trial.
(No credit card required)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.