Overlaying images using CSS

Question

I have the following images:

and

and using css I need to show them on the web page as one image:

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.

mu is too short · Accepted Answer · 2011-07-22 03:58:05Z

2

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.

answered Jul 22, 2011 at 3:58

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

if you have no control over the contents of the images, I would also recommend this approach. My only suggestion would be that as the tick is more of a status indicator than content in its own right, replace the img.badge element with a span.badge with some assistive text inside it.

James Khoury Over a year ago

@chris or leave it as an img and put an alt="..." on it

Chris · Accepted Answer · 2011-07-22 04:21:45Z

0

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/

answered Jul 22, 2011 at 4:21

Chris

10.5k3 gold badges31 silver badges31 bronze badges

1 Comment

Andrey Over a year ago

See, I don't have control over what exactly image will be instead of light bulb - it might be any png that user supplies, that's why I couldn't use the background trick in the first place.

Collectives™ on Stack Overflow

Overlaying images using CSS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related