Scaling image and hotspots

by clairesuzy

HTML

<div id="bg"><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg"></div>
<div id="box"></div>

CSS

html, body {padding: 0; margin: 0;}

#bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#bg img {display: block; width: 100%; height: 100%;}

#box { 
 position: absolute;
 top: 44%;
 left: 25%;
 border: 3px double #dd0099; 
 width: 8%; 
 height: 12%; 
}