Webmaster Forum / HTML, CSS, Scripts / CSS / August 2008

It seems like there are only 4 methods to overlap 2 images using CSS?

There are two images, each with its own URL. Using CSS, there seems to
be 2 ways to overlap them (the task is actually to put a "play button"
image with size 50 x 50 on top of the bigger image which is a video
thumbnail size 200 x 150).

1) Use <div><img ><img ></div> with the play button as the second
image and displayed relatively positioned to overlap the first image.
The div better have enough width so that the second img won't wrap to
the next line.

2) use a div that is relatively positioned without modifying the top
and left value. enclose the video thumbnail image inside of it first,
and then enclose the play button image which is absolute positioned
with some top and left value. Now the 2nd image is absolutely
positioned relative to the outer div.

3) and 4) are suggested by someone

3) use negative margin.  this is very similar to (1).   will try that
as relative positioning have problem on both IE 6 and 7  (pls see post
http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse
_thread/thread/593db08fb89f1d55?hl=en#
)

4) use an image that has a background.  looks like that's very
possible, but somehow is it true that we cannot easily size the 2
images and position them easily.  (for example, how do you position
the play button on the video thumbnail?)   one easy method might be to
make them the same size, and with the top image have a lot of
transparent area to achieve the top margin and left margin for the top
image.

Or else, use a PHP program or something similar that can do GD or
ImageMagick, and overlap the smaller image onto the other image, and
then return the resulting image as a single image.

Any other method possible? The PHP method probably works the simplest
for HTML and CSS design coz the final image is really a single image,
but it would take up a lot of CPU time on the servers. Thanks very
much for your help!