only 2 common methods to overlap 2 images in CSS? (or else use a program)

It seems like there are only 2 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.

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!

 

Well, this is kind of odd, but I've used it before. You can put a background-image on a img tag. Put your transparent top image as the image tag source, put the underlying background on it as a background. Simple.

<img src="images/playbutton.png" 
  width="160" height="100"
  alt="video name"
  style="background:url(images/video.png) 0 0 no-repeat;"
/>

Code (markup):

unfortunately that makes the 'content' image be the play button, not the actual video preview. CSS off would look kind of screwy.

For me the question would be which of those images is the actual content. For example you are saying put a play button over the video preview. To me the video preview is content, so it should be an img tag. The play button is presentational, so I'd put that on something like a span and position it over the img.

In addition to using absolute positioning, you could also use a negative margin to move the floating image over the background... or if you put the play button first and made it absolute positioned without setting it's placement, the other image would appear right under it.

<div class="overimage">
  <span></span>
  <img src="images/video.png" 
    width="160"
    height="100"
    alt="video name"
  />
</div>

.overimage span {
  position:absolute;
  width:160px;
  height:100px;
  background:url(images/playbutton.png)
}

Code (markup):

Should work in theory. Absolute positioned elements should go over unpositioned ones... so you'd not even need to tweak it with position settings.

 

that's great! 2 more solutions!

the negative margin is very similar to relative positioning... but i can't wait for try it on IE because relative position caused random bug on IE (see post http://forums.digitalpoint.com/showthread.php?t=991959 )

for the image having a background, is it true that the two images have to have exact same size (video image 264 x 197 and the play button is also 264 x 197 with the button right at the center and surrounding transparent region), or somehow made so that the top one has transparent region to be position where the two images are supposed to be overlapping (e.g. top and left margin) and it is not possible to change the size of the background image or size of the main image, or the positioning of either of them on the 264 x 197 px final region. sorry i haven't used too much complicated background technique for its limitations.

 

That's not over, that's replacing it -- not even close to what was being asked.