视差背景图像+浏览器高度问题+响应式设计

Question

我一直试图在我的网站上为背景图片添加视差滚动效果。

当浏览器高度发生变化时，我遇到了问题。 （它会将图像向上推到文本上。）使用min-height或max-height添加查询似乎不是一个非常优雅的解决方案。

您是否建议我针对不同的媒体查询添加不同尺寸的图片，或者只是简单地改变背景尺寸和背景位置？

#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;
}

以下是我使用的媒体查询：

@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;
}
}