I need the red dot divs to remain fixed on a world map, regardless of browser resize. Not sure if I should be adjusting div properties or background.
Here's my CSS code, any feedback is appreciated as I'm new to web design:
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>My World</title>
</head>
<body>
<div id="home" class="home">
<div id="dallas" class="box dallas"></div>
<div id="hongkong" class="box"> </div>
<div id="capetown" class="box"></div>
<div id="seoul" class="box"></div>
<div id="mumbai" class="box"></div>
<div id="northampton" class="box"></div>
<div id="sanfrancisco" class="box"></div>
<div id="newyork" class="box"></div>
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="interactive.js" type="text/javascript" charset="utf-8"></script>
</html>
CSS:
/*****************
MAIN
******************/
body {
background: url('worldmap.jpg');
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#home {
}
/* Button Design */
.box {
width: 15px;
height: 15px;
background-color: #FE2E64;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}
/*****************
HOME BUTTONS (Placement only)
******************/
.home {
position: relative;
}
#dallas {
margin-left: 22.5%;
margin-top: 7%;
}
#hongkong {
margin-left: 81.2%;
margin-top: 1.5%;
}
#capetown {
margin-left: 55%;
margin-top: 15%;
}
#seoul {
margin-left: 85%;
margin-top: -22.5%;
}
#mumbai {
margin-left: 69.5%;
margin-top: 4.5%;
}
}
#northampton {
margin-left: 29%;
margin-top: -8.5%;
}
#sanfrancisco{
margin-left: 15%;
margin-top: 0%%;
}
#newyork {
margin-left: 28%;
margin-top: -2%;
}
/*****************
HOVER
******************/
#dallas:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#hongkong:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#capetown:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#seoul:hover{
background-color: #F5A9BC;
cursor: pointer;
}
#mumbai:hover{
background-color: #F5A9BC;
cursor: pointer;
}
#northampton:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#sanfrancisco:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#newyork:hover {
background-color: #F5A9BC;
cursor: pointer;
}