Solved

How to add an image on an image

Posted on 2013-01-29
3
276 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

860 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