Position divs on top of background image with relative position - css

Question

I have full-width div with a background image in it. The background image has people in it and I'd like to show a tooltip when you hover over each person.
I don't think you can write image maps with % widths so I'm trying to do this with DIVs. Something like this:
<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>
and Css something like this:
.homepageimage{
width:100%;
max-width:2000px;
height:750px;
margin:auto;
margin-top:-50px;
background: url({{ 'homepage_test2.jpg' | asset_url }});
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
clear:both;
overflow:hidden;
}
.artistmap{
height:100%;
border:2px solid red;
float:left;
}
.artistmap:hover{
content:attr(title);
}
#davidmap{
width:10%;
}
#ceceliamap{
width:15%;
}
#erinmap{
width:5%;
}
#aimap{
width:5%;
}
#tommap{
width:10%;
}
Unfortunately depending on the size of the screen the divs won't line up with the people... What's the best way of solving this?
I posted the above code to cssdesk here:
http://cssdesk.com/vmZSD
Thanks!

Answer 1

Here is a FIDDLE that might help you.
CSS
.americangothic {
float: left;
width: 315px;
height: 384px;
background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
background-size: 315px 384px;
position: relative;
}
.changemediv1 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: red;
border: 3px solid gray;
}
.changemediv2 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: blue;
border: 3px solid gray;
}
.face1:hover ~ .changemediv1 {
background-color: green;
}
.face2:hover ~ .changemediv2 {
background-color: green;
}
.face1 {
width: 80px;
height: 110px;
border: 0px solid red;
position: absolute;
top: 70px;
left: 35px;
}
.face2 {
width: 80px;
height: 130px;
border: 0px solid red;
position: absolute;
top: 30px;
left: 180px;
}
img {
width: 315px;
height: 384px;
}
Just remember that all the divs need to be in the same container.