Placing an image over another image in CSS

Status
Not open for further replies.
bubbles

bubbles

Domainers...
Apr 11, 2007
858
27
0
So heres my problem. I have a site I'm designing for a realator. I have an image of a house. And a sold image, which is diagonal across top left and transparent everywhere else. Heres the two options I'm considering.

1. Set the house to the background-image of a div with a width and height of the house image, put the actual sold image inside the div.

2. Using position:relative on the first image, and position:relative -img_width on the second image so it shows up in the same spot as the first. Then ajust the z index of both images so they show up in the correct order.

I'm not good with CSS and neither of these options are as "clean" as I would like, anyone else have another idea?
 


I need to do it on the fly as there will be an unlimited amount of houses he puts up.
 
gdlibrary and a png image that is diagonal "sold" banner with a transparent background. Check to see if sold == 1 in the db ... if so, overlay the banner. else just display the picture.

I fucking hate css and will do anything with php I can to avoid learning the higher end stuff.
 
Both of your approaches should work fine in CSS. Flickr does something like this to (try to) prevent images from being saved. They put a transparent image over the image being displayed. If you want to do it outside of CSS, you could set up a simple PHP exec() call to ImageMagick to alter the image whenever it's marked as sold.
 
HTML: 
<div style="position: relative;">
 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="position: absolute; top: 0px; left: 0px;" />
 <img src="http://l.yimg.com/a/i/ww/beta/y3.gif" style="position: absolute; top: 30px; left: 20px;"/>
</div>

Wrap the images in a container with "position: relative". Then order the images in HTML in the order you want them to appear. The last image will be on top. Set "position: absolute" on the images and use "top" and "left" to control the alignment.
 
Status
Not open for further replies.
Top Bottom