将背景图片固定在粘性位置div上

Question

我想创建一个看起来像这样的效果：

所需效果：

我使用粘性div来创建页眉矩形，并尝试将background-attachment设置为fixed，但这是行不通的，因为背景已固定到正在移动的div上。有人知道我该怎么实现吗？

这是我当前的CSS：

.headerdiv {
    position: sticky;
    top: 0;
    height: 200px;
    background-image: url(res/header-bg.png);
    background-attachment: fixed;
    z-index: 1;
    text-align: center;
    color: white; 
}

和我的html：

<div class="headerdiv">
    <img class="logoimg"  src="res/logo.png"></img>
</div>

Answer 1

您将需要JavaScript来执行此操作。 Here's an answer到类似的问题。就您而言，您需要影响元素的background-position而不是top;

如果您需要进一步的帮助，请将您的代码放在一段代码中，我将编辑我的答案以更具体地针对您的情况。

编辑：这是一个更新的小提琴，可以为您提供所要拥有的东西。

https://jsfiddle.net/h9vbmc8x/