Image overlay circle over circle

Question

First let me tell you what I want to achieve. I want a layout as below(Replace the squares with circles):

|------------|
| |-------|  |
| | button|  |
| |-------|  |
|------------|

It is a button inside a circle image. The button should also be circular in shape. How do I go about doing it? As in, is there a way to overlay one circular image over another?

Answer 1

Yes that's possible, by adding the top circle with a transparent edge in a div that has the bigger circle as background-image (if needed also transparent). To make a circular shaped button you would need to use an imagemap.

Answer 2

You could do this with PNG or GIF formats, or any other format supporting transparency and working in the browsers you need to support.

It may be easier to use a single image with an image map, though.

Answer 3

Just use the CSS to absolutely position the elements, img tag in the background and button over it. Set the z-index of the overlaid element (button) higher than the background element.