完全覆盖视差背景图像的背景图像

Question

我有一个背景视差图像，我希望在它上面符合另一个.png。要在当前状态下实现此目的，我必须更改.parallaxLetters组件上的背景大小以包含而不是覆盖。显然，当我这样做时，视差效果会中断。任何解决方法？例如：

At 100% Zoom

At 75% Zoom

CSS：

.Study 
{
    overflow-y: hidden ! important;
    overflow-x: hidden ! important;
    height: 1094px; 
    background-image: url("FlashPacks/studyB.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-bottom: 30px; 
}

.parallaxLetters 
{
    /* The image used */
    background-image: url("FlashPacks/swirl5.png");

    /* Set a specific height */

    /* Create the parallax scrolling effect */
    overflow-y: hidden ! important;
    overflow-x: hidden ! important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 30px;
    margin-bottom: 30px;
}

HTML：

<!-- Middle Text -->
<div class="parallaxLetters">
    <div class="Study">
    </div>
</div>