Background-img align responsive? - css

Question

http://lucasdebelder.be/stack/index.html
Make sure to check it out at 1680px width, then it's perfectly aligned together but if I make my screen bigger or smaller in width it doesn't align anymore any idea how I can get around this issue?
I'm trying to recreate my Dribbble shot.
Snippet of code.
.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>
EDIT: It's hard to recreate this in a small jsfiddle, keep that in mind but then you get to see the code.

Answer 1

Your code snippet seems to be a little bit broken, but I was able to produce the desired effect by using the unit vw for your background position, which is dependant on the viewport width.
#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;
These are the changes I made in the developer tools and the imaged stayed aligned, independet of the viewport width.
Edit: changed the code a little, because I didn't realize there were two background images in #section0