title: Position divs on top of background image with relative position
body: <p>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.</p>
  
  <p>I don't think you can write image maps with % widths so I'm trying to do this with DIVs. Something like this:</p>
  
  <pre><code>&lt;div class="homepageimage"&gt;
  &lt;div class='artistmap' id='davidmap'&gt;&lt;/div&gt;
  &lt;div class='artistmap' id='ceceliamap'&gt;&lt;/div&gt;
  &lt;div class='artistmap' id='erinmap'&gt;&lt;/div&gt;
  &lt;div class='artistmap' id='aimap'&gt;&lt;/div&gt;
  &lt;div class='artistmap' id='tommap'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and Css something like this:</p>
  
  <pre><code>.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%; 
   }
  </code></pre>
  
  <p>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?</p>
  
  <p>I posted the above code to cssdesk here:</p>
  
  <p><a href="http://cssdesk.com/vmZSD" rel="nofollow">http://cssdesk.com/vmZSD</a></p>
  
  <p>Thanks!</p>