How to add an image on an image

Hi all,

I am using HTML + CSS.

I have 2 images.
1- nophoto.png - size 60x60
2- search.png - size 16x16 (I may change for 8x8)

I would like to display the search.png image on the bottom right corner of the nophoto.png image. I think that using CSS background-image would do the trick, but I don't see the search.png image appearing. I think I may need to modify the Z-Index.

I tried to Google "HTML how to Add image on image" etc., but googling this give wrong results.

I attached a file that shows what I want to do, with an arrow pointing to the search.png image.

Thank you
sample.png
LVL 1
EtdashouAsked:
Who is Participating?
 
soupBoyConnect With a Mentor Commented:
Here is a little jsFiddle I created to show as an example: two images, stacked using css positioning

You have to have a 'container' around the images that has a 'position: relative' rule.  THen with your small image, you give it a 'position: absolute; bottom: 0; right: 0;' set of rules and then it will work.  You should probably set a z-index as well on the small image.

Let me know if you have any questions.
0
 
user_nCommented:
Try to use z-index modifing it with firefox firebug. You can load the page. Start the firebug and try to modify the css options with inspect element. And you will see the result imediatly. You can also give the source and image files, or link to the site for us to examin it.
0
 
EtdashouAuthor Commented:
Thank you soupboy, your jsFiddle was what I needed!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.