Hero image div overlay moves on resize - html

Question

I've placed a profile picture div over my hero image. As i resize the window the profile pic moves. I've tried fixed, relative, absolute...nothing works. Any Ideas - thanks, adolfo - site: http://adolfobarreto.atwebpages.com/
html:
<div id="heroimage">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="profilepicture"></div>
<div class="module mid">
<h2> Adolfo Barreto </h2>
<h4> Web Designer </h4>
</div>
</div>
css:
// Hero
html, body, #heroimage{
width:100%;
height:80%;
}
#heroimage{
background:url('/../assets/img/heroVector.jpg') center center;
background-size:cover;
}
#import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
.mid h2 {
background-color: #7A3E48;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
margin: 0;
position: absolute;
top: 40%;
left: 50.5%;
font-size: 2rem;
transform: translate(-50%, -50%);
}
.mid h4 {
background-color: #7A3E48;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
margin: 0;
position: absolute;
top: 44%;
left: 50.5%;
font-size: 1.5rem;
transform: translate(-50%, -50%);
}
//end hero
// profile picture
.profilepicture {
position: absolute;
width: 180px;
height: 180px;
margin: 0px;
margin-top: 10%;
margin-left: 44.6%;
background: url(/../assets/img/AdolfoBarreto.4.jpg) no-repeat;
background-size: 180px 180px;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 3;
-webkit-box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px rgba(0,0,255,.2);
-moz-box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px rgba(0,0,255,.2);
box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px rgba(0,0,255,.2);
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
/* border-radius: 50% has issues on some mobile browsers */
}
.pulse1 {
position: absolute;
width: 200px;
height: 200px;
margin-top: 9.5%;
margin-left: 44%;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 1;
opacity: 0;
border: 3px solid rgba(255,255,255,.1);
-webkit-animation: pulsejg1 4s linear infinite;
-moz-animation: pulsejg1 4s linear infinite;
animation: pulsejg1 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pulse2 {
position: absolute;
width: 200px;
height: 200px;
margin-top: 9.5%;
margin-left: 44%;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 2;
opacity: 0;
border: 1px solid rgba(255,255,255,0);
-webkit-animation: pulsejg2 4s linear infinite;
-moz-animation: pulsejg2 4s linear infinite;
animation: pulsejg2 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#-webkit-keyframes pulsejg1 {
0% {
-webkit-transform: scale(.6);
opacity: 0;
}
50% {
-webkit-transform: scale(.6);
opacity: 0;
}
60% {
-webkit-transform: scale(.9);
opacity: .2;
}
70% {
-webkit-transform: scale(1.1);
opacity: .35;
}
80% {
-webkit-transform: scale(1.25);
opacity: .2;
}
100% {
-webkit-transform: scale(1.4);
opacity: 0;
}
}
#-moz-keyframes pulsejg1 {
0% {
-moz-transform: scale(.6);
opacity: 0;
}
50% {
-moz-transform: scale(.6);
opacity: 0;
}
60% {
-moz-transform: scale(.9);
opacity: .2;
}
70% {
-moz-transform: scale(1.1);
opacity: .35;
}
80% {
-moz-transform: scale(1.25);
opacity: .2;
}
100% {
-moz-transform: scale(1.4);
opacity: 0;
}
}
#keyframes pulsejg1 {
0% {
transform: scale(.6);
opacity: 0;
}
50% {
transform: scale(.6);
opacity: 0;
}
60% {
transform: scale(.9);
opacity: .1;
}
70% {
transform: scale(1.1);
opacity: .25;
}
80% {
transform: scale(1.25);
opacity: .1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
#-webkit-keyframes pulsejg2 {
0% {
-webkit-transform: scale(.6);
opacity: 0;
}
40% {
-webkit-transform: scale(.8);
opacity: .05;
}
50% {
-webkit-transform: scale(1);
opacity: .1;
}
60% {
-webkit-transform: scale(1.1);
opacity: .3;
}
80% {
-webkit-transform: scale(1.2);
opacity: .1;
}
100% {
-webkit-transform: scale(1.3);
opacity: 0;
}
}
#-moz-keyframes pulsejg2 {
0% {
-moz-transform: scale(.6);
opacity: 0;
}
40% {
-moz-transform: scale(.8);
opacity: .05;
}
50% {
-moz-transform: scale(1);
opacity: .1;
}
60% {
-moz-transform: scale(1.1);
opacity: .3;
}
80% {
-moz-transform: scale(1.2);
opacity: .1;
}
100% {
-moz-transform: scale(1.3);
opacity: 0;
}
}
#keyframes pulsejg2 {
0% {
transform: scale(.6);
opacity: 0;
}
40% {
transform: scale(.8);
opacity: .05;
}
50% {
transform: scale(1);
opacity: .1;
}
60% {
transform: scale(1.1);
opacity: .3;
}
80% {
transform: scale(1.2);
opacity: .1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
// end profile picture

Answer 1

You used % value for margins its why when you re-size your browser, your picture move. Use instead margin: 0px auto to always keep it on middle and % top to always keep it 20 % from top no mater what screen size you device have. I guess you want this picture to be placed exactly on middle. Its how your code should looks like:
.profilepicture
{
position: absolute;
width: 180px;
height: 180px;
margin: 0px auto;
top: 20%;
left: 0;
right: 0;
bottom: 0;
background: url(/../assets/img/AdolfoBarreto.4.jpg) no-repeat;
background-size: 180px 180px;
z-index: 3;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 5px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 10px rgba(0, 0, 255, 0.2);
border-radius: 999px;}
Same thing with this animation which you placed there. By this, you will keep image always on middle.

Answer 2

You have used margin-top: 10%; and margin-left: 44.6%; as percentage that causes to move the picture when the window resizes. Change it to pixels, and you can also remove left margins and add margin: auto; instead.
Change:
.profilepicture {
margin-top: 10%;
margin-left: 44.6%;
}
To:
.profilepicture {
margin: auto;
}