Radio buttons Responsive Web Design (HTML, CSS)

i have 4 radio buttons and an image as a background. Every radio button i want to be in a specific place of image and do not move. I want responsive web design but when i change the scale of the window all the radio buttons move out of their position. this is the code i have

.island{

 background-image: url("nhsia.png"); 

 position: relative;
 width: 100%;
 height: 550px;
 background-image: url("nhsia.png"); 
 background-repeat: no-repeat;
 background-size: contain;
 }


#radio1 {
 position:absolute;
 left:7%;
 top:17.5%;
}

#radio2 {
position:absolute;
left:15.5%;
top:15%;
}

#radio3 {
position:absolute;
left:40%;
top:28%;
}

#radio4 {
position:absolute;
left:56%;
top:37%;
}