Image overlay circle in a circle
First, let me tell you what I want to achieve. I need a layout like below (Replace squares with circles):
|------------|
| |-------| |
| | button| |
| |-------| |
|------------|
It's a button inside a circle image. The button should also be round. How should I do it? As in, is there a way to overlay one circle image on top of another?
Just use CSS to absolutely position the elements, the tag img
in the background and the button above it. Set the z-index of the overlay (button) above the background element.
Yes, this is possible by adding a top circle with a transparent edge to the div that has a larger circle as a background image (also transparent if needed). To make a circular button you will need to use an imagemap .
You can do this using PNG or GIF formats, or any other format that supports transparency and works in browsers that you need to support.
However, it is easier to use a single image with an image map.