css - 背景-img对齐响应？

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

您的代码片段似乎有点损坏，但我能够通过将单位 vw 用于您的背景位置来产生预期的效果，这取决于视口(viewport)宽度。

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

这些是我在开发者工具中所做的更改，图像保持对齐，与视口(viewport)宽度无关。

编辑:稍微更改了代码，因为我没有意识到 #section0

中有两个背景图像