• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

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
0
Etdashou
Asked:
Etdashou
1 Solution
 
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
 
soupBoyCommented:
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
 
EtdashouAuthor Commented:
Thank you soupboy, your jsFiddle was what I needed!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now