Solved

How to add an image on an image

Posted on 2013-01-29
3
278 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

717 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