Parallax Background Image + Browser Height Issues + Responsive Design - css

Question

I've been trying to add a parallax scrolling effect to a background image on my website.
I'm having problems when the browser height changes. (It will push the image up over the text.) Adding queries using min-height or max-height doesn't seem like a very elegant solution.
Do you suggest I include different sizes of the image for different media queries, or just simply alter the background size and background position?
#headerwrap {
background-color: #3F8BE0;
min-height: 1020px;
padding-top: 85px;
padding-bottom: 0;
text-align: center;
/* Parallax scrolling effect */
background-image: url("../img/globe345.png");
background-size: 800px 800px;
background-position: 50% 155%;
background-attachment: fixed;
background-repeat: no-repeat;
}
And here are the media queries I'm using:
#media (min-width: 590px) and (max-width: 767px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 55%;
min-height: 720px;
}
}
#media (min-width: 320px) and (max-width: 589px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 40%;
min-height: 625px;
}
}
#media (max-height: 950px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 75%;
min-height: 710px;
}
}