背景图像对齐响应？

Question

http://lucasdebelder.be/stack/index.html

确保以 1680 像素的宽度检查它，然后它完美地对齐在一起，但如果我将屏幕宽度变大或变小，它就不再对齐了，知道如何解决这个问题吗？

我正在尝试重新创建我的Dribbble shot。

代码片段。

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80%;
    width: 80%;
    transform: translate(-50%,-50%);
    
    background: #F1F1F1;
    box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
    border-radius: 15px;
    
    background-image: url("http://svgur.com/i/3W7.svg");
    background-position: 129% 38%;
    background-repeat: no-repeat;
    background-size: 752px;
    
}
#section0 {
    background-image: url("http://svgur.com/i/3W7.svg");
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size:  750px;
}

<section class="wrapper">
            <h1>TEST</h1>
            </section>

编辑：很难在一个小的 jsfiddle 中重新创建它，请记住这一点，但随后您会看到代码。

Answer 1

您的代码 sn-p 似乎有点损坏，但我能够通过使用单位 vw 作为您的背景位置来产生所需的效果，这取决于视口宽度。

#section0 {
background-image: url(../img/1/bol.svg), url(../img/1/vlekBG.svg);
background-position: 0vw bottom, 61vw;
background-repeat: no-repeat;
background-size: auto, 750px;
}


.wrapper {
position: absolute;
top: 50%;
left: 50%;
height: 80%;
width: 80%;
transform: translate(-50%,-50%);
background: #F1F1F1;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
border-radius: 15px;
background-image: url(../img/1/vlekBG.svg);
background-position: 51vw;
background-repeat: no-repeat;
background-size: 752px;

这些是我在开发人员工具中所做的更改，并且图像保持对齐，与视口宽度无关。

编辑：稍微修改了代码，因为我没有意识到#section0中有两个背景图片