lining up clickable elements on a background

[candycanearter07]

hi,

does anyone know how to "properly" line up clickable elements on a background in a way that it doesn't break on resize? the only things that I can think of would be to have each "clickable" thing in the image as a separate <img> tag and use like a div (which im not sure how to set up with having the background image also line up and not relying on stretch image scaling) or by using a map which completely breaks if your image can be scaled (which if its a fullscreen image it will)

so any advice here?

[shortround]

You can set the position and height of elements using percentages. If your parent element is, say, 400x300, and you say add another element that is 10% wide by 20% high, the child element will be 40x60. If you resize the parent element, the child element will maintain its size relative to the parent

If I'm not explaining it well, here's an example:

https://jsfiddle.net/ty94fnek/2/

The size and position of the <a> links are set as percentages (relative to the parent; the picture of the cat). In the second image, I've resized the cat, but the <a> links appear in the correct place and correct size, since the percentages are the same.

I am using absolute positioning for the <a> links, so the parent element needs to be position: relative as well.

Let me know if I'm not being clear