Bilder übereinander darstellen

Hallo,

Ich habe hier zwei Bilder:
http://www.philosof.de/images/m_blog.jpg
http://www.pixogames.de/wp-content/upl…nnt-300x157.png

Diese will ich so auf meiner Seite darstellen:
http://i.imgur.com/8eMBg.png

Das kleinere Bild soll also auf der oberen rechten Ecke des größeren Bildes dargestellt werden.

Das Kleinere Bild soll direkt zum größeren Bild "verknüpft" sein. Und es sollen später mehrere solcher Bildkombinaionen auf einer Seite dargestellt werden.

Ich habe nirgends etwas gefunden, was wirklich funktioniert.

Danke schon einmal für die Hilfe,
Fairox

Super, funktioniert einwandfrei :)

Nun möchte ich das ganze fest in die Thumbnails der Startseite meiner Webpage integrieren.

Versucht habe ich das ganze schon aber es funktioniert nicht richtig.
Die fetten Sachen hab ich hinzugefügt.

Index.php:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                            <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?>[B]<div style="width:100px; height:30px; background:url(http://www.philosof.de/images/m_blog.jpg);"></div>[/B]

Stylesheet:

.post_thumbnail {
    border: 1px solid #292828;
    margin: 0 0 10px 0;
    background: #000000;
[B]width:100px; 
height:127px; 
background:url(http://www.pixogames.de/wp-content/uploads/2011/04/Unbenannt-300x157.png); 
padding: 0 0 30px 200px;[/B]

Das Ergebnis sah dann so aus:

http://i.imgur.com/FPiXo.png

Was habe ich falsch gemacht?