Overlaying images using CSS

I have the following images:

and using css I need to show them on the web page as one im开发者_JAVA技巧age:

I.e. the smaller image is in the right bottom corner of the bigger image on top of it.

The size of the bigger image is not static - the image will be different every time you reload the page.

Wrap the images in <div>s with display:inline-block; position: relative. Then you can absolutely position your little badge images. For example:

<div class="wrapper">
    <img src="http://placekitten.com/200/200" width="200" height="200">
    <img src="http://placekitten.com/50/50" width="50" height="50" class="badge">
</div>
<div class="wrapper">
    <img src="http://placekitten.com/250/200" width="250" height="200">
    <img src="http://placekitten.com/25/50" width="25" height="50" class="badge">
</div>

And:

.wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
}
.badge {
    position: absolute;
    bottom: 0;
    right: 0;
}

And a live version: http://jsfiddle.net/ambiguous/sEH6L/

The display: inline-block and line-height will tightly wrap the <div> around the main image so that it will have the same size as the image, the position: relative is needed for the position: absolute on the badges; then you absolutely position the badge in the lower right corner of the <div> and you're done.

In your specific example, the lightbulb could be a transparent png. In which case, why not just set a background-image for the <img> tag for the lightbulb?

img.tick { background: url(tick.png) 100% 100% no-repeat; }

To get the distance between the images right, you can always add padding to the element, too.

http://jsfiddle.net/HM7F2/