Solved

How to add an image on an image

Posted on 2013-01-29
3
273 Views
Last Modified: 2013-01-29
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
Comment
Question by:Etdashou
3 Comments
 
LVL 9

Expert Comment

by:user_n
ID: 38831768
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
 
LVL 8

Accepted Solution

by:
soupBoy earned 250 total points
ID: 38831851
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
 
LVL 1

Author Comment

by:Etdashou
ID: 38832121
Thank you soupboy, your jsFiddle was what I needed!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now