Overlay one image on top of another

clearz · 24-03-2006 4:28pm #1

Hi
I recently completed a website for an estate agents. As part of the requirement they wanted a Sale Agreed watermark to appear over the picture of the property if a Sold checkbox was ticked in the CMS.

I accomplished this by having the property image as the background-image style of a div and the SaleAgreed image would then be the in an img tag inside the div. This worked fine and there was no issues until....

...today when I recieved a phone call from the estate agents saying that when clients printed out a page from the site the image was invisible. This is resonable enough as most browsers will not print out background images/colours by default but was overlooked on my part when desgning the site.

My problem is now that I cant figure out a way to get 2 images on a site to overlap one another without using one as a background image. I tried enclosing the second image in a div and setting the style to something like <div style="position:relative;top:-250:"> this will move the second image up over the first one but it still leaves a big space where the image should be. Any Ideas on how to achieve this.

thanks
J.

axer · 24-03-2006 4:58pm

Could you have 2 images of every house? The first would be without sale agreed on it and the other would be with the sale agreed text - so when the tick box is picked the image changes to the sale agreed text version.

aidan_walsh · 24-03-2006 5:05pm

CSS z-indexing.

louie · 25-03-2006 12:46pm

did you try floating divs?

Serbian · 25-03-2006 7:44pm

It's actually a lot more simple than it seems. If the image is contained within a div or a table cell, all you need to do is place a div inside the container, position it absolutely and insert an image into the absolutely positioned div.

I have made a page to show you how it works. I have used text and given the div a width but all you need to do is add an image. This works in IE5.01+ and the latest FireFox and Opera so there should be no compatibility concerns.