我有一个网页，我想要一个特色图片，背景滚动浏览器滚动的速度。这是我的jsfiddle
$(window).scroll(function () {
$("#featured-image").css("background-position", "50%" + ($(this).scrollTop()) + "px");
});
问题是现在背景滚动，但元素保持空白，我看到空白区域。我希望该元素的大小减小。我想到了很多解决方案，但后来我想到了将header元素的底部向下滚动直到它通过特色图像元素并连接到#content元素顶部的想法。问题是标题的高度和特征图像的高度是可变的。有人能指出我解决这个问题的正确方法吗？
我需要保持feature-image元素没有高度，因为它现在可以在响应式设计上完美运行。
这是我的jsfiddle，https://jsfiddle.net/Uncite/6stm31z4/