4 common methods to overlap 2 images in CSS? any more method? (orelse use a program)

[liketofindoutwhy]

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 ></divwith 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....89f1d55?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!

[Bergamot]

liketofindoutwhy wrote:

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

I never counted, but there are indeed multiple ways, probably several
more than 4.

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).

Piece of cake, really.

4) use an image that has a background.

This one get my vote. One way to do it:

div {
background: #fff url(img1.png);
color: #000;
width: 200px;
height: 150px;
text-align: center;
}
img {
margin-top: 50px;
}

<div><img src="img2.png" width="50" height="50" alt="Play"></div>

is it true that we cannot easily size the 2
images and position them easily.

You cannot resize a background image, at least not at this time. Make
the containing div the same dimensions as the background image. If the
background isn't the size you need, resize it in a graphics editor first.

Positioning the foreground image is easy peasy.

(for example, how do you position
the play button on the video thumbnail?)

This is a case where absolute positioning might be useful, but you can
do it just as easily without, just using margin on the <imgor even
padding on the containing <div>

--
Berg

[liketofindoutwhy]

On Aug 22, 4:02*pm, Bergamot <[e-mail]:

This one get my vote. One way to do it:

div {
* background: #fff url(img1.png);
* color: #000;
* width: 200px;
* height: 150px;
* text-align: center;}

img {
* margin-top: 50px;

}

<div><img src="img2.png" width="50" height="50" alt="Play"></div>

i see... one reason this has problem is that if a link a wrapped
around the final result, IE won't take the whole thing as the link.
the play button is excluded from the link. some more info on
http://groups.google.com/group/comp....89f1d55?hl=en#

[Bergamot]

liketofindoutwhy wrote:

On Aug 22, 4:02 pm, Bergamot <[e-mail]:

>>
<div><img src="img2.png" width="50" height="50" alt="Play"></div>

one reason this has problem is that if a link a wrapped
around the final result, IE won't take the whole thing as the link.

Sure it will, if you apply the right rules. You had the right idea in
your other post (with the span display:block), you just applied them
kind of backwards.

Put the <aelement in there and make it display:block. You might need
to add a couple more rules, but that should make the inline <afill the
parent div.

--
Berg

[liketofindoutwhy]

On Aug 22, 8:02 pm, Bergamot <[e-mail]:

liketofindoutwhy wrote:

On Aug 22, 4:02 pm, Bergamot <[e-mail]:

<div><img src="img2.png" width="50" height="50" alt="Play"></div>

one reason this has problem is that if a link a wrapped
around the final result, IE won't take the whole thing as the link.

Sure it will, if you apply the right rules. You had the right idea in
your other post (with the span display:block), you just applied them
kind of backwards.

Put the <aelement in there and make it display:block. You might need
to add a couple more rules, but that should make the inline <afill the
parent div.

now, could it be an IE bug, as IE clearly shows the target link on the
status line of IE, but clicking that play button has no effect.

I don't quite see how right now it is backward... and put the <a>
element there? I thought it is already there.... you mean change <a>
to display:block? i thought in reality, <ais not displayed but is
just to indicate a link. i am sorry, do you think you can give an
example?

[Bergamot]

liketofindoutwhy wrote:

On Aug 22, 8:02 pm, Bergamot <[e-mail]:

>liketofindoutwhy wrote:

On Aug 22, 4:02 pm, Bergamot <[e-mail]:

><div><img src="img2.png" width="50" height="50" alt="Play"></div>

one reason this has problem is that if a link a wrapped
around the final result, IE won't take the whole thing as the link.

Put the <aelement in there and make it display:block.

now, could it be an IE bug, as IE clearly shows the target link on the
status line of IE, but clicking that play button has no effect.

IE has lots of bugs, among which is how it handles replaced elements
like <img>, and switching elements from inline to block.

i thought in reality, <ais not displayed but is
just to indicate a link.

Not sure what you mean by that. <ais an inline element, so it is
display:inline by default.
http://www.w3.org/TR/CSS21/visuren.html#display-prop

There is a lot more info on that page about inline and block elements,
among other things.

i am sorry, do you think you can give an
example?

Didn't somebody else already give you a working solution?

--
Berg